webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法

{
 // プログラムのメインエントリモジュール。ユーザーはこのモジュールのエクスポートを参照します "main": "dist/bundle.js",
 // プロジェクトに含まれるファイル "files": [
  「ソース」、
  「距離」
 ]、
 // react と react-dom を依存関係と互換性のあるこの構成に移動します "peerDependencies": {
  "反応": "^17.0.1",
  "反応dom": "^17.0.1"
 },
}

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

モジュール.エクスポート = {
 モード: 'production'、
 エントリ: './src/Loading.jsx',
 出力: {
  ファイル名: "index.js",
  パス: path.join(__dirname, "./dist/"),
  ライブラリターゲット: 'umd',
 },
 最適化：
  最小化: false、
 },
 解決する： {
  拡張子: ['.jsx']
 },
 モジュール: {
  ルール:
   {
    テスト: /\.css$/,
    ローダー: [MiniCssExtractPlugin.loader, 'css-loader?modules'],
   },
   {
    テスト: /\.(js|jsx)$/,
    ローダー: "babel-loader",
    除外: /node_modules/、
   },
  ]
 },
 プラグイン: [
  新しい MiniCssExtractPlugin({
   filename: "main.min.css" // 抽出された CSS ファイルのファイル名})
 ]、
}

// ロールアップ.config.js
// rollup が commonjs を認識できない問題を解決する import commonjs from 'rollup-plugin-commonjs'
// babel は es6 コードの変換を処理します import babel from 'rollup-plugin-babel'
//resolv は、依存するサードパーティのライブラリと記述したソースコードをマージします。import resolve from 'rollup-plugin-node-resolve'
// postcss は CSS ファイルを処理し、'rollup-plugin-postcss' から postcss をインポートします

エクスポートデフォルト{
 入力: "src/Loading.jsx",
 // cjs ファイルと es ファイルをパッケージ化します。出力: [
  {
   ファイル: "dist/loading.es.js",
   フォーマット: "es",
   グローバル:
    反応する: '反応する',
   },
  }, {
   ファイル: 'dist/loading.cjs',
   フォーマット: "cjs",
   グローバル:
    反応する: '反応する',
   },
  },
 ]、
 外部: ['反応'],
 プラグイン: [
  ポストcss(
   { 拡張子: ['.css'] }
  ）、
  バベル({
   除外: "node_modules/**",
   ランタイムヘルパー: true、
  }）、
  共通js(),
  解決する（）、
 ]、
}

npmパック

npm バージョン [<新バージョン> | メジャー | マイナー | パッチ | プレメジャー | プレマイナー | プレパッチ | プレリリース [--preid=<プレリリース ID>] | from-git]

npm 公開