npm

Publish の方法

webpack

output

ライブラリターゲットは commonjs2 にする。（umd でも可）

const output = {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  libraryTarget: 'commonjs2',
  publicPath: '/dist/',
};

externals

バンドルしないファイルを記載する。特に react 関係は必ず外すこと。

const externals = {
  // Don't bundle external libraries
  react: {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'React',
    root: 'React',
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'ReactDOM',
    root: 'ReactDOM',
  },
  emotion: {
    commonjs: 'emotion',
    commonjs2: 'emotion',
  },
};

.npmignore

yarn add したときに、node_modules に入る必要のないファイルを記載する。 なお、下記のファイルには ignore が効かず、強制的にインストールされる。

• package.json
• README.md
• LICENSE

package.json

scripts

npm に publish する前に必要なコマンドを記載する。

"prepublish": "del-cli dist/**/* && npm run build"

main

npm package の default export になるべきファイルを記載する。

"main": "dist/bundle.js",

peerDepenencies

警告表示のみで実際にインストールはしないものを記載（react はこちら）

dependencies

実際にインストールするものを記載（絶対に必要なパッケージはこちら）

npm への publish

npm login
npm publish

参考

React コンポーネントを NPM で公開する方法

AMD, CommonJS, and UMD の違い