序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この小さなプロジェクトをパッケージ化して 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerでmongodbデータベースを使用するための実装コード
>>: InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...
ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....
目次一般的な圧縮形式: gz .bz2 .xz .zip一般的に使用されるアーカイブは圧縮を必要とす...
目次序文provide/inject を通じて Vuex 関数を実装する方法このプラグインをアプリケ...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
目次事前分析とは何ですか?変数と関数の準備の違いvar 変数の繰り返し宣言変数と関数の昇格の優先順位...
実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...
目次抽象化と再利用シリアルセグメントシリアル、セグメントパラレル要約するはじめに: JS は当然並列...
目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...
背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...
BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...
スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適...
目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...