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 ロック) の詳細な説明

推薦する

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

geoip を使用して nginx で地域を制限する方法

このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...

ローカルの Windows リモート デスクトップから Alibaba Cloud Ubuntu 16.04 サーバーに接続する方法

ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....

Linux の圧縮および解凍コマンドの紹介

目次一般的な圧縮形式: gz .bz2 .xz .zip一般的に使用されるアーカイブは圧縮を必要とす...

Vue3 で状態管理を実装するために provide を使用する方法

目次序文provide/inject を通じて Vuex 関数を実装する方法このプラグインをアプリケ...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

Web面接におけるJS事前解析と変数プロモーションの違い

目次事前分析とは何ですか?変数と関数の準備の違いvar 変数の繰り返し宣言変数と関数の昇格の優先順位...

Nginx+tomcat ロードバランシングクラスタの実装方法

実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...

JSはリクエストディスパッチャーを実装する

目次抽象化と再利用シリアルセグメントシリアル、セグメントパラレル要約するはじめに: JS は当然並列...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

1 つの記事で Nginx の現在の制限を理解する (簡単な実装)

Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...

MySQL Innodb ストレージ構造と Null 値の保存の詳細な説明

背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...

CSS チュートリアル: CSS 属性メディア タイプ

スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適...

js での typeof の使い方を理解するための記事

目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...