ロールアップを使用してライブラリをパッケージ化するための基本構成

ロールアップは、JavaScriptモジュールパッカーです。 jsに準拠したES6モジュールのファイルをパッケージ化します(commonjsモジュールなどの非ES6モジュールは、最初にes6モジュールにプラグインする必要があります)。 さらに、Rollupは自動的にツリーの揺れを実行し、コードサイズを効果的に縮小します。 ただし、Rollupはコード分割や実行時制の動的インポートをサポートしていないため、ライブラリのパッケージャとして適しています。

あなたがライブラリを書くたびに、あなたはたくさんの基本的な設定、バベルコード、様々なフォーマットツール、提出時の仕様などを完成する必要があります。 したがって、クラスライブラリを作成するために必要な基本ロールアップ構成が確立され、それによって後続の開発ライブラリのコストが削減されます。
基本的な使用規則がわからない場合は、 Rollup.jsの公式Webサイトを参照してください。

テンプレートについて

テンプレートの使用

git clone https://github.com/banyaner/rollup_template.git
複製程式碼

  1. package.jsonファイル内のすべての「rollup_template」を自分のモジュールの名前に変更します。
  2. テンプレートプリセットはes6とcommonjsモジュールをパッケージ化します。 複数の環境をサポートするモジュールをパッケージする必要があるならば、次のセクションを見てください。
  3. テンプレートは、git addのときにコードを自動的にフォーマットするのにprettierを使います
  4. テンプレートは、git commitを使用してコードの使用を解放するときに、公式のコミット仕様の使用を強制します
  5. package.jsonのメインフィールドはiife関数で、このモジュールはブラウザ環境に基づいてパッケージ化されるように事前設定されています。 さらに、対応する他の種類のモジュール(ノード環境およびcommonjsモジュール)もパッケージ化されます。 プロジェクトの要件に応じて手動で変更できます。 プログラムコードは、それがブラウザ環境であるかどうかprocess.browser判断するためにprocess.browserによって使用されるので、コードを生成するときにコードを減らすことができます。 特定の使用法は、記事を見ることができます[翻訳]どのようにノードとブラウザの両方に使用できるJavaScriptパッケージを書くのですか?

package.jsonのメイン、モジュール、ブラウザの各フィールドについて。

ロールアップは、ES6、CommonJS、およびUMDモジュールのパッケージ化をサポートします。

{
  "main": "dist/rollup_template.cjs.js",
  "module": "dist/rollup_template.esm.js",
  "browser": "rollup_template.umd.js"
}
複製程式碼

WebpackとRollupはどちらもES6モジュールを静的に最適化し(ツリーの揺れとスコープの吊り上げ)、リソースをインポートするためのエントリポイントとしてmoduleフィールドを使用します。 だから:
moduleフィールドはES6モジュールを指し、mainはCommonJSモジュールを指します。
しかし、あなたが書いたモジュールがNode.jsとブラウザ実行の両方をサポートする必要があるなら、あなたは現場でブラウザを使う必要があります。
ブラウザフィールドを使用する方法は2つあります。

  1. 上記の例のように、umdファイルアドレスを書きます。 これにより、すべてのノードとブラウザのコードがその中にパックされます。 (つまり、プロジェクトがブラウザ側でのみ実行される場合、コード内に冗長なノード側コードがある可能性があります)。 注: この方法を使用した、パッケージ化ツールはモジュールフィールドを無視し、静的最適化を実行できません
  2. 置換を行うためにいくつかのファイルしか必要ない場合は、そのオブジェクトを使用できます。 しかし、前述の記事ではこの方法の不都合をすでに説明しているのでテンプレートでrollup-plugin-replaceを使用してファイルパッケージブラウザとノード環境コードを自動的に実装します。 ブラウザフィールドを使用する必要はありません。

テンプレートで設定されたプラグイン:

  1. Rollup-plugin-node-resolveロールアップでは、npmにインストールされている依存関係をnode_modulesに処理する方法がわかりませんこのプラグインは、ロールアップに外部モジュールの照会方法を指示します。
  2. rollup-plugin-commonjsライブラリーの中にはcommonjsのモジュールであり、デフォルトのロールアップはES6標準を使用することです外部プラグインはcommonjsモジュールをES6モジュールに変換することです。
  3. ロールアップ – プラグイン – バベル
  4. @ commitlint / cli @ commitlint / config-従来のハスキー標準バージョンこれら3つのプラグインは、公式のコミット仕様とその仕様を実装するためにインストールされます。 より多くの紹介はここにます
    ~~ 5。babel-external-helpers babelのすべてのヘルパー関数を含むコードを生成するために使用されるbabel-cli内のコマンド。 babel-helpersパッケージには多くのヘルパー関数が含まれており、ファイルがコンパイルされたことをbabelが検出すると、その関数をモジュールの先頭に置きます。 ただし、これらのヘルパーを使用しているファイルが複数ある場合は、複数のモジュールが繰り返し定義されます。 Rollupがパッケージを使用するすべてのモジュールで参照するのではなく、パッケージの先頭にある「ヘルパー」のみを参照できるようにするexternal-helpersプラグイン。 ~~今はデフォルトのサポートです。
    さらに、.babelrcファイルはルートディレクトリではなくsrcに配置されるため、さまざまなタスクに合わせて.babelrc(テストなど)を構成できます。 babelテンプレートで設定されている互換性は"browserslist": [ "iOS >= 8", "Android > 4.4" ]各ライブラリファイル要求は異なるかもしれません。 必要に応じて修正してください。 Babelの設定と互換性は密接に関連しています。 フォローアップについては別に説明します。
  5. 可愛らしいlint- staged gitはフォーマットコードを追加します。これはさまざまな人がコードスタイルを開発するのに便利です。
  6. Rollup-plugin-replaceは環境変数の値を設定します。これにより、ブラウザとノードに必要なコードを簡単にパッケージ化できます。

コードアドレス

元のリンク