webpackとrollupを使ってコンポーネントライブラリを包装する方法

前言
前にloadingのスタイルコンポーネントを作りました。コードの再使用性を実現するために、この小さいプロジェクトを包装してnpmに発表しました。毎回のパッケージ化の過程で、エラーが発生しました。このコンポーネントはもう2.7.0バージョンになりました。まだ調整すべきところがありますが、なんとか使えます。

webpackとrollupの比較
webpackはプログラマーが一番多く使う包装道具です。面接でwebpackに関する質問がありますが、rollupはあまり聞かれません。このような現象を招いた一つの原因は、webpackを使って開発し、ライブラリ開発にrollupを使ったということです。
しかし、2つのパッケージツールは強力なプラグインの開発機能があり、機能の違いはますますぼやけてきました。しかし、rollupはもっと簡潔に使い、小型のファイルを作ることができます。しかし、先端アプリケーションを行うと、性能分析はより小さなライブラリが必要になりますので、rollupはより多くの開発ライブラリの要求に合致します。
今回は包装の実験です。二つの道具を使ってこのプロジェクトに一回包装します。
webpackで包装します
包装する前に、package.jsonファイルにフィールドを追加または変更する必要があります。

{
 //        ，             
 "main": "dist/bundle.js",
 //        
 "files": [
  "src",
  "dist"
 ],
 //  react react-dom       ，    
 "peerDependencies": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
 },
}

webpackパッケージは多くのライブラリを使って異なるファイルを処理する必要があります。このプロジェクトは小さいです。

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
 mode: 'production',
 entry: './src/Loading.jsx',
 output: {
  filename: "index.js",
  path: path.join(__dirname, "./dist/"),
  libraryTarget: 'umd',
 },
 optimization: {
  minimize: false,
 },
 resolve: {
  extensions: ['.jsx']
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    loader: [MiniCssExtractPlugin.loader, 'css-loader?modules'],
   },
   {
    test: /\.(js|jsx)$/,
    loader: "babel-loader",
    exclude: /node_modules/,
   },
  ]
 },
 plugins: [
  new MiniCssExtractPlugin({
   filename: "main.min.css" //     css    
  })
 ],
}

開発と生産の二つの環境下の配置を書くべきですが、ここではプロジェクト環境下の配置だけを書きました。
rollupで包装します
rollupで使うライブラリが多いです。

// rollup.config.js
//   rollup    commonjs   
import commonjs from 'rollup-plugin-commonjs'
// babel  es6     
import babel from 'rollup-plugin-babel'
// resolve                    
import resolve from 'rollup-plugin-node-resolve'
// postcss  css  
import postcss from 'rollup-plugin-postcss'

export default {
 input: "src/Loading.jsx",
 //     cjs   es   
 output: [
  {
   file: "dist/loading.es.js",
   format: "es",
   globals: {
    react: 'React',
   },
  }, {
   file: 'dist/loading.cjs',
   format: "cjs",
   globals: {
    react: 'React',
   },
  },
 ],
 external: ['react'],
 plugins: [
  postcss(
   { extensions: ['.css'] }
  ),
  babel({
   exclude: "node_modules/**",
   runtimeHelpers: true,
  }),
  commonjs(),
  resolve(),
 ],
}

npmに包む
npmに発注するにはいくつかのコマンドが必要です。

npm pack

プロジェクトを梱包した後、コマンドラインに圧縮パッケージの詳細を出力します。

バージョンを更新

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

今回変更したサイズによって異なるコマンドを選択します。
最後にリリースコマンドを使います。

npm publish

そしてメールが届きます。あなたのカバンはもう公開されました。
ここでwebpackとrollupパッケージパッケージの方法についての記事を紹介します。webpackとrollupパッケージの内容については、以前の記事を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。