序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この小さなプロジェクトをパッケージ化して 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 ロック) の詳細な説明
目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...
この記事では、ORDER BY文の最適化について学びます。その前に、インデックスの基礎的な理解が必要...
目次1. 観察可能2. 高階関数3. エクスプレスボックスモデル3.1. エクスプレスボックスモデル...
絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...
序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...
目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...
この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...
まず、VMware Workstation 15.1 バージョンをダウンロードします。Thunder...
中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...
序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...
dig - DNS ルックアップ ユーティリティドメイン名のアクセス障害が発生した場合、ドメイン名の...
1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...
序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...
MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...
1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...