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

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

序文

以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この小さなプロジェクトをパッケージ化して npm で公開しました。パッケージングと配布の過程で、次々とエラーが発生していました。@buzuosheng/loading コンポーネントはバージョン 2.7.0 に到達しました。まだ調整する箇所はありますが、ようやく使えるようになりました。

webpackとrollupの比較

Webpack は、プログラマーの間で最もよく使用されるパッケージング ツールです。面接では、Webpack に関する質問がよく出されますが、Rollup に関する質問はそれほど多くありません。この現象の理由の 1 つは、アプリケーション開発には webpack を使用し、ライブラリ開発には rollup を使用するという考え方です。

ただし、どちらのパッケージング ツールも強力なプラグイン開発機能を備えており、機能の違いはますますあいまいになっていますが、rollup の方が使いやすく、より小さなファイルを生成できます。しかし、フロントエンド アプリケーションを作成する場合、パフォーマンス分析にはより小さなライブラリが必要になることが多いため、ロールアップは開発ライブラリの要件により適合します。

これはパッケージ化の実験であり、プロジェクトをパッケージ化するために 2 つのツールを使用します。

webpack によるバンドル

パッケージ化する前に、package.json ファイル内のいくつかのフィールドを追加または変更する必要があります。

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

Webpack のパッケージ化には、さまざまなファイルを処理するための多くのライブラリが必要です。このプロジェクトは比較的小規模なので、使用されるライブラリは 2 つだけです。

// 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 への公開にはいくつかのコマンドだけが必要です。

npmパック

プロジェクトをパッケージ化した後、コマンド ラインは圧縮されたパッケージに関する詳細情報を出力します。

更新版

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

変更の規模に応じて異なるコマンドを選択します。

最後に、publish コマンドを使用します。

npm 公開

その後、パッケージが正常に公開されたことを通知するメールが届きます。

webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法については、これで終わりです。webpack と rollup によるコンポーネント ライブラリのパッケージ化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます
  • Vueパッケージングは​​image-webpack-loaderプラグインを使用して画像を圧縮および最適化します
  • vue-cli + webpackプロジェクトがサーバーにパッケージ化された後、ttfフォントが見つからない問題の解決策
  • vue は uglifyjs-webpack-plugin パッケージング エラーの問題を解決します
  • Webpack4 マルチページアプリケーションパッケージソリューションの詳細な説明
  • Webpackのパッケージング原則とローダーおよびプラグインの実装に関する深い理解
  • mocha を使用して webpack パッケージ プロジェクトで「スモーク テスト」を実行する一般的なプロセスの詳細な説明
  • Webpack ファイル パッケージ化エラー例外

<<:  Dockerでmongodbデータベースを使用するための実装コード

>>:  InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明

推薦する

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

MySQL の order by ステートメントの最適化方法の詳細な説明

この記事では、ORDER BY文の最適化について学びます。その前に、インデックスの基礎的な理解が必要...

Rx レスポンシブプログラミングについての簡単な説明

目次1. 観察可能2. 高階関数3. エクスプレスボックスモデル3.1. エクスプレスボックスモデル...

CSSポジショニングによる階層関係の問題の詳細な説明

絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

Linux IO 多重化 epoll ネットワーク プログラミング

序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...

dig/nslookup コマンドを使用して DNS 解決手順を表示する方法

dig - DNS ルックアップ ユーティリティドメイン名のアクセス障害が発生した場合、ドメイン名の...

Docker で Docker0 ブリッジのデフォルトのネットワーク セグメントを変更する方法

1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...

MySQL パーティション フィールド列に別のインデックスを作成する必要がありますか?

序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...

MySQL 実行ステータスの表示と分析

MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...