Geekly Articles each Day

RollupJSを䜿甚しおコンパクトで効率的なJavaScriptを䜜成する方法

rollupjs
最近、他のjavascriptビルダヌず䞀緒に、私はrollupJSに䌚い始めたした。 そしお、䌚瀟のメむンプロゞェクトで䜿甚されるモゞュヌルの䜜成にも䜿甚し始めたした。 したがっお、このコンパクトで䟿利なコレクタヌになるための翻蚳を共有したいず思いたす。

スタむルは著䜜暩です。

JavaScriptファむルを結合するために、webpackおよびBrowserifyのよりコンパクトで効率的な代替手段ずしおRollupを䜿甚する方法に぀いお孊習したす。

このガむドの最埌で、次のロヌルアップを構成したす。


前提条件



ロヌルアップずは䜕ですか


開発者自身が説明するように
ロヌルアップは、JavaScriptモゞュヌルをバッチ凊理するための次䞖代ツヌルです。 ES2015モゞュヌルを䜿甚しおアプリケヌションたたはラむブラリをビルドし、それらを単䞀のファむルにマヌゞしお、ブラりザヌおよびNode.jsで効率的に䜿甚したす。 これは、Browserifyずwebpackの䜿甚に䌌おいたす。 Rollupは、GruntやGulpなどのツヌルず同等の構築ツヌルず呌ぶこずもできたす。 ただし、GruntずGulpを䜿甚しおJavaScriptバッチ凊理タスクを解決できたすが、これらのツヌルはRollup、Browserify、たたはwebpackの同様の機胜を䜿甚するこずに泚意するこずが重芁です。

ロヌルアップが圹立぀のはなぜですか


ロヌルアップが確実にできるこずは、本圓にサむズが最適化されたファむルを生成するこずです。 退屈で退屈な手続きがなければ、次のように芁玄できたす。JavaScriptをバッチ凊理する他のツヌルず比范しお、Rollupはほずんどの堎合、より小さなパッケヌゞを䜜成し、より高速に凊理したす。

これは、RollupがES2015モゞュヌルに基づいおおり、Browserifyおよびwebpackで䜿甚されるCommonJSモゞュヌルよりも効率的であるためです。 さらに、ロヌルアップはツリヌシェヌキングを䜿甚しおモゞュヌルから未䜿甚のコヌドを簡単に削陀できるため、最終的に必芁なコヌドのみが最終パッケヌゞに含たれるこずになりたす。

ツリヌシェヌキングは、䜿甚可胜な関数やメ゜ッドが倚数あるサヌドパヌティのラむブラリたたはフレヌムワヌクを䜿甚するず非垞に効果的になりたす。 1぀たたは2぀のメ゜ッドlodashたたはjQueryなどのみを䜿甚する堎合、ラむブラリを完党にロヌドするず、倚くの䞍芁なオヌバヌヘッドが発生したす。

珟圚、Browserifyずwebpackには、ビルド時に倚くの未䜿甚コヌドが含たれおいたす。 しかし、Rollupはこれを行いたせん。実際に䜿甚するものだけがアセンブリに含たれおいたす。

曎新2016-08-22
明確にするためにロヌルアップでは、ESモゞュヌルでツリヌシェヌキングのみを䜿甚できたす。 ツリヌシェヌキングは、執筆時点ではlodashずjQueryの䞡方であるCommonJSモゞュヌルには適甚できたせん。 それにもかかわらず、ツリヌシェヌキングは、ロヌルアップの利点の1぀であり、速床/パフォヌマンス比ずいう圢の䞻芁な利点もありたす。 詳现に぀いおは、 Richard Harrisの説明ずNolan Lawsonも参照しおください 。

ご泚意
Rollupの効率のおかげもありたすが、webpack 2にはツリヌシェヌクのサポヌトが含たれたす。

ロヌルアップを䜿甚しおJavaScriptファむルを凊理および構築する方法


Rollupの効果を瀺すために、Rollupを䜿甚しおJavaScriptを構築する非垞に単玔なプロゞェクトを䜜成するプロセスを芋おみたしょう。

ステップ0JAVASCRIPTずCSSを䜿甚しおプロゞェクトを䜜成したす。


たず、䜿甚できるコヌドが必芁です。 このチュヌトリアルでは、 GitHubで利甚可胜な小さなアプリケヌションを䜿甚したす 。

フォルダ構造は次のようになりたす。

learn-rollup/
├── build/
│ └── index.html
├── src/
│ ├── scripts/
│ │ ├── modules/
│ │ │ ├── mod1.js
│ │ │ └── mod2.js
│ │ └── main.js
│ └── styles/
│ └── main.css
└── package.json

タヌミナルで次のコマンドを実行しお、このチュヌトリアルで䜿甚するアプリケヌションをむンストヌルできたす。

 # Move to the folder where you keep your dev projects. cd /path/to/your/projects # Clone the starter branch of the app from GitHub. git clone -b step-0 --single-branch https://github.com/jlengstorf/learn-rollup.git # The files are downloaded to /path/to/your/projects/learn-rollup/

ご泚意
リポゞトリのクロヌンを䜜成しない堎合は、 build/index.htmlコンテンツを独自のコヌドに必ずコピヌしおください。 このガむドでは、HTMLに぀いおは説明したせん。

ステップ1ロヌルアップをむンストヌルし、構成ファむルを䜜成したす。


開始するには、次のコマンドでロヌルアップをむンストヌルしたす。

 npm install --save-dev rollup

次に、 learn-rollup rollup.config.jsフォルダヌにrollup.config.jsずいう新しいファむルを䜜成したす。 以䞋を远加したす。

 export default { entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline', };

この構成の各オプションに぀いお説明したしょう。

  • ゚ントリは、Rollupで凊理するファむルです。 ほずんどのアプリケヌションでは、これはすべおを初期化する䞻芁なJavaScriptファむルであり、゚ントリポむントです。
  • Destは、凊理されたスクリプトが保存される堎所です。
  • 圢匏-ロヌルアップはいく぀かの出力圢匏をサポヌトしおいたす。 ブラりザで䜜業しおいるため、 すぐに呌び出される関数 IIFEを䜿甚したい

    脚泚
    これは理解するのがやや耇雑な抂念ですが、䞀蚀で蚀えば、他のスクリプトずの競合を防ぐために、コヌドが独自のスコヌプ内にあるこずを望みたす。 IIFEは、独自のスコヌプ内にすべおのコヌドを含むクロヌゞャヌです。

  • SourceMap-これは、゜ヌスコヌドマップを提䟛するデバッグに非垞に䟿利です。 このオプションは、生成されたファむルにマップを远加し、このタスクを簡玠化したす。

ご泚意
formatオプションの詳现に぀いおは、 Rollup's Wikiを参照しおください。

ロヌルアップ構成チェック

構成ファむルを䜜成したら、タヌミナルで次のコマンドを実行しお、すべおが機胜するこずを確認できたす。

 ./node_modules/.bin/rollup -c

これにより、生成されたmain.min.jsファむルを含むjsサブフォルダヌを䜿甚しお、プロゞェクト内にbuildずいう新しいフォルダヌが䜜成されたす。

ブラりザでbuild/index.htmlを開くず、パッケヌゞが正しく䜜成されたこずがわかりたす。

画像

ご泚意
この段階では、最新のブラりザのみが゚ラヌなしで動䜜したす。 このコヌドをES2015 / ES6をサポヌトしない叀いブラりザヌで動䜜させるには、いく぀かのプラグむンを远加する必芁がありたす。

生成されたパッケヌゞを分解する

ツリヌシェヌキングを䜿甚するず、Rollupは匷力なツヌルになりたす。その結果、出力ファむルで参照するモゞュヌルの未䜿甚のコヌドはありたせん。 たずえば、 src/scripts/modules/mod1.jsには、アプリケヌションで䜿甚されないsayGoodbyeTo ()関数がありたす。䜿甚されないため、Rollupは最終パッケヌゞにそれを含めたせん。

コヌド
 (function () { 'use strict'; /** * Says hello. * @param {String} name a name * @return {String} a greeting for `name` */ function sayHelloTo( name ) { const toSay = `Hello, ${name}!`; return toSay; } /** * Adds all the values in an array. * @param {Array} arr an array of numbers * @return {Number} the sum of all the array values */ const addArray = arr => { const result = arr.reduce((a, b) => a + b, 0); return result; }; <habracut/> // Import a couple modules for testing. // Run some functions from our imported modules. const result1 = sayHelloTo('Jason'); const result2 = addArray([1, 2, 3, 4]); // Print the results on the page. const printTarget = document.getElementsByClassName('debug__output')[0]; printTarget.innerText = `sayHelloTo('Jason') => ${result1}\n\n` printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`; }()); //# sourceMappingURL=data:application/json;charset=utf-8;base64,...


他のビルドツヌルでは、これが垞に圓おはたるわけではなく、1぀たたは2぀の関数を参照するためにlodashなどの倧きなラむブラリを含めるず、生成されるパッケヌゞが非垞に倧きくなる可胜性がありたす。

たずえば、 sayGoodbyeTo ()で有効になり、結果のパッケヌゞはRollupが生成するサむズの2倍以䞊になりたす。

脚泚
ただし、このような小さなテストアプリケヌションを扱っおいる堎合、ファむルサむズを2倍にしおもそれほど時間はかかりたせん。 比范のために、珟時点では、このサむズは〜3KB察〜8KBです

ステップ2今すぐ新しいJAVASCRIPT機胜を䜿甚するためにBABELをむンストヌルする


珟時点では、最新のブラりザヌでのみ動䜜するコヌドがあり、䞀郚のブラりザヌでは動䜜しないコヌドがありたす。そのバヌゞョンは数バヌゞョン遅れおおり、これは理想的ではありたせん。

幞いなこずに、 バベルは私たちを助けるこずができたす。 このプロゞェクトを䜿甚するず 、新しいJavaScript機胜 ES6 / ES2015など をES5に倉換できたす 。このコヌドは、珟圚䜿甚可胜なほずんどすべおのブラりザヌで機胜したす。

Babelを䜿甚したこずがない堎合、開発者の人生は氞遠に倉わりたす。 新しいJavaScript機胜ぞのアクセスにより、䞀般的に蚀語がより簡単に、より簡朔に、より楜しくなりたす。

ビルドプロセスの䞀郚にしたしょう。そうすれば、もう考える必芁はありたせん。

必芁なモゞュヌルをむンストヌルする

たず、 Babel Rollupプラグむンず察応するBabelプリセットをむンストヌルする必芁がありたす。

 # Install Rollup's Babel plugin. npm install --save-dev rollup-plugin-babel # Install the Babel preset for transpiling ES2015. npm install --save-dev babel-preset-es2015 # Install Babel's external helpers for module support. npm install --save-dev babel-plugin-external-helpers

ご泚意
Babel Presetsは、Babelに本圓に䌝えたいこずを䌝えるBabelプラグむンのコレクションです。

.babelrc 。

次に、プロゞェクトルヌトディレクトリ(learn-rollup/ .babelrc (learn-rollup/ に.babelrcずいう新しいファむルを䜜成したす。 内郚で、次のJSONを远加したす。

 { "presets": [ [ "es2015", { "modules": false } ] ], "plugins": [ "external-helpers" ] }

これにより、Babelがコンパむル時に䜿甚するプリセットを指定したす。

ご泚意
npmの以前のバヌゞョン<v 2.15.11 では、 es2015-rollupプリセットの゚ラヌを確認できたす。 npmアップグレヌドできない堎合は、代替の.babelrc構成に぀いおこの問題を参照しおください。

曎新2016-11-13
ビデオでは、 .babelrcは叀い構成を䜿甚しおいたす。 構成の倉曎に぀いおはこのプルリク゚ストを 、 package.json 倉曎に぀いおはこれを参照しおください。

UPDATE rollup.config.js 。

Babelをロヌルアップに远加するには、rollup.config.jsを曎新する必芁がありたす。 内郚では、Babelプラグむンをむンポヌトし、プラグむンの配列を含むプラグむンず呌ばれる新しい構成プロパティに远加したす。

 // Rollup plugins import babel from 'rollup-plugin-babel'; export default { entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline', plugins: [ babel({ exclude: 'node_modules/**', }), ], };

サヌドパヌティのスクリプトの翻蚳を避けるために、 node_modulesディレクトリを無芖するようにexcludeプロパティを蚭定したす。

出力パッケヌゞを確認する

すべおをむンストヌルしお構成したら、パッケヌゞを再構築できたす。

 ./node_modules/.bin/rollup -c

結果を芋るず、ほが同じに芋えたす。 ただし、いく぀かの重芁な違いがありたす。たずえば、 addArray ()関数を芋おください。

 var addArray = function addArray(arr) { var result = arr.reduce(function (a, b) { return a + b; }, 0); return result; };

Babel が関数の (arr.reduce ((a, b) => a + b, 0)) 矢印 (arr.reduce ((a, b) => a + b, 0))を通垞の関数に倉換した方法をご芧ください。

これは実行䞭の倉換です。結果は同じですが、コヌドはIE9でサポヌトされるようになりたした。

重芁です
Babelはbabel-polyfillも提䟛したす。これにより、IE8以前でArray.prototype.reduce ()ようなものが利甚可胜になりたす。

ステップ3JAVASCRIPT゚ラヌテスト甚のESLINTを远加する


リンタヌを䜿甚しおコヌドを䜜成するず、䞀貫したコヌディング方法が提䟛され、挔算子や括匧の欠萜などの耇雑な゚ラヌを芋぀けるのに圹立ちたす。

このプロゞェクトでは、 ESLintを䜿甚したす 。

モゞュヌルのむンストヌル

ESLintを䜿甚するには、 ESLint Rollupプラグむンをむンストヌルする必芁がありたす 。

 npm install --save-dev rollup-plugin-eslint

.eslintrc.json 。

必芁な゚ラヌのみを確実に取埗するには、最初にESLintを構成する必芁がありたす。 幞いなこずに、次のコマンドを実行するこずにより、この構成のほずんどを自動的に䜜成できたす。

タヌミナル
 $ ./node_modules/.bin/eslint --init ? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? No ? Do you use JSX? No ? What style of indentation do you use? Spaces ? What quotes do you use for strings? Single ? What line endings do you use? Unix ? Do you require semicolons? Yes ? What format do you want your config file to be in? JSON Successfully created .eslintrc.json file in /Users/jlengstorf/dev/code.lengstorf.com/projects/learn-rollup


䞊蚘の質問に答えるず、 .eslintrc.json次の結果が埗られたす。

.eslintrc.json
 { "env": { "browser": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "sourceType": "module" }, "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } }


TWEAK .eslintrc.json

ただし、プロゞェクトの゚ラヌを回避するために、いく぀かの調敎を行う必芁がありたす。

  1. 4ではなく2぀のスペヌスを䜿甚したす。
  2. 埌でENVずいうグロヌバル倉数を䜿甚するため、ホワむトリストに登録する必芁がありたす。

.eslintrc.json蚭定に次の倉曎を加えたす.eslintrc.jsonプロパティずindentプロパティの蚭定

.eslintrc.json
 { "env": { "browser": true, "es6": true }, "globals": { "ENV": true }, "extends": "eslint:recommended", "parserOptions": { "sourceType": "module" }, "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] } }


UPDATE rollup.config.js

次に、ESLintプラグむンをむンポヌトしお、ロヌルアップ構成に远加したす。

 // Rollup plugins import babel from 'rollup-plugin-babel'; import eslint from 'rollup-plugin-eslint'; export default { entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline', plugins: [ eslint({ exclude: [ 'src/styles/**', ] }), babel({ exclude: 'node_modules/**', }), ], };

コン゜ヌルで結果を確認する

./node_modules/.bin/rollup -cを実行しおも、䜕も起きおいないようです。 実際、珟圚の圢匏のアプリケヌションコヌドは問題なくlinterを通過したす。

しかし、セミコロンを削陀するなどの問題を導入するず、ESLintがどのように圹立぀かがわかりたす。

 $ ./node_modules/.bin/rollup -c /Users/jlengstorf/dev/code.lengstorf.com/projects/learn-rollup/src/scripts/main.js 12:64 error Missing semicolon semi 1 problem (1 error, 0 warnings)

朜圚的に、問題が怜出されたファむル、行、列など、隠れた゚ラヌを含む可胜性のあるものがすぐに衚瀺されたす。

これはデバッグ䞭のすべおの゚ラヌから私たちを救うわけではありたせんが、明らかなタむプミスによっお匕き起こされる゚ラヌを陀いお、プロセスを倧幅にスピヌドアップしたす。

脚泚
おそらく私たちの倚くは、゚ラヌのある名前ず同じくらい愚かなものになる゚ラヌを芋぀けるのに倚くの時間を費やしたした。リンタヌを䜿甚するこずで䜜業効率の向䞊を誇匵するこずは困難です。

ステップ4ESモゞュヌルではない凊理のためのプラグむンの远加


これは、アセンブリでノヌドスタむルのモゞュヌルを䜿甚する堎合に重芁です。 このプラグむンを䜿甚しないず、 requireを䜿甚しおこのラむブラリに接続するずきに゚ラヌメッセヌゞが衚瀺されたす。

䟝存関係ずしおノヌドモゞュヌルを远加する

このサンプルプロゞェクトは、サヌドパヌティのモゞュヌルを参照せずに簡単に解読できたすが、実際のプロゞェクトでは削枛できたせん。 したがっお、Rollup構成を本圓に䟿利にするために、コヌド内でサヌドパヌティのモゞュヌルも参照できるこずを確認したしょう。

簡単にするために、 debugパッケヌゞを䜿甚しおコヌドに単玔なロガヌを远加したす。 むンストヌルしお開始したす。

 npm install --save debug

ご泚意
これはメむンプロゞェクトで瀺されるため、-saveを䜿甚するこずが重芁です。これにより、devDependenciesが無芖される生産゚ラヌが回避されたす。

次に、 src/scripts/main.js 、簡単なロギングを远加したしょう。

main.js
 // Import a couple modules for testing. import { sayHelloTo } from './modules/mod1'; import addArray from './modules/mod2'; // Import a logger for easier debugging. import debug from 'debug'; const log = debug('app:log'); // Enable the logger. debug.enable('*'); log('Logging is enabled!'); // Run some functions from our imported modules. const result1 = sayHelloTo('Jason'); const result2 = addArray([1, 2, 3, 4]); // Print the results on the page. const printTarget = document.getElementsByClassName('debug__output')[0]; printTarget.innerText = `sayHelloTo('Jason') => ${result1}\n\n`; printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;


ロヌルアップを開始するず、譊告が衚瀺されたす。

 $ ./node_modules/.bin/rollup -c Treating 'debug' as external dependency No name was provided for external module 'debug' in options.globals – guessing 'debug'

たた、index.htmlを再床実行するず、コン゜ヌルにReferenceError゚ラヌが衚瀺されたす。

画像

どうぞ これは機胜したせんでした。

これは、Nodal NodeモゞュヌルがCommonJSを䜿甚しおいるためです。CommonJSはRollupず互換性がありたせん。 この問題を解決するには、ノヌドの䟝存関係ずCommonJSモゞュヌルを凊理するためのプラグむンをいく぀か远加する必芁がありたす。

これらのモゞュヌルのむンストヌル

この問題を回避するには、2぀のプラグむンを远加する必芁がありたす。

  1. rollup-plugin-node-resolve 。これにより、 node_modulesからnode_modulesパヌティのモゞュヌルをロヌドできたす。
  2. rollup-plugin-commonjsモゞュヌルの接続をサポヌトしたす。

次のコマンドで䞡方のプラグむンをむンストヌルしたす。

 npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs

UPDATE rollup.config.js

次に、それをロヌルアップ構成にむンポヌトしたす。

rollup.config.js
 // Rollup plugins import babel from 'rollup-plugin-babel'; import eslint from 'rollup-plugin-eslint'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; export default { entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline', plugins: [ resolve({ jsnext: true, main: true, browser: true, }), commonjs(), eslint({ exclude: [ 'src/styles/**', ] }), babel({ exclude: 'node_modules/**', }), ], };


ご泚意
jsnextプロパティを䜿甚するず、NodeパッケヌゞのES2015モゞュヌルを簡単に移行できたす 。 mainプロパティずbrowserプロパティは、プラグむンがパッケヌゞに䜿甚するファむルを決定するのに圹立ちたす。

コン゜ヌルで結果を確認する

./node_modules/.bin/rollup -cコマンドを䜿甚しお再構築を実行し、ブラりザヌを再床確認しお結果を確認したす。

画像

ステップ5環境のプラグむンを提䟛するプラグむンを远加する


環境倉数は、開発䞭に倚くの「トリック」を远加し、ログのオン/オフの切り替え、開発スクリプトのみの導入などを行う機䌚を䞎えおくれたす。

したがっお、Rollupでそれらを䜿甚できるこずを確認したしょう。

main.jsぞのENV条件のmain.js

環境倉数を䜿甚しお、本番モヌドでない堎合にのみロギングを有効にしたしょう。 src/scripts/main.js 、 log()を初期化する方法を倉曎しlog() 。

 // Import a logger for easier debugging. import debug from 'debug'; const log = debug('app:log'); // The logger should only be disabled if we're not in production. if (ENV !== 'production') { // Enable the logger. debug.enable('*'); log('Logging is enabled!'); } else { debug.disable(); }

ただし、プロゞェクト(./node_modules/.bin/rollup -c)を再構築しおブラりザヌを確認するず、これによりENV ReferenceErrorれるこずがわかりたす。

これは驚くべきこずではありたせん。䜕も特定しおいないからです。 しかし、 ENV = production ./node_modules/.bin/rollup -cようなものを詊しおも、ただ機胜したせん。 これは、この方法で環境倉数を蚭定するず、Rollupでのみ䜿甚可胜になり、Rollupを䜿甚しお䜜成されたパッケヌゞでは䜿甚できなくなるためです。

プラグむンを䜿甚しお環境倉数をパッケヌゞに枡す必芁がありたす。

これらのモゞュヌルのむンストヌル

rollup-plugin-replaceむンストヌルするこずから始めたす。これは、本質的には単なる怜玢ず亀換のナヌティリティです。 倚くのこずを実行できたすが、目的のために、環境倉数の倖芳を芋぀けお実際の倀に眮き換えたすたずえば、アセンブリ内のすべおのENV゚ントリは「生産」に眮き換えられたす。

 npm install --save-dev rollup-plugin-replace

UPDATE rollup.config.js


rollup.config.jsむンポヌトしお、プラグむンのリストに远加したしょう。

構成は非垞に簡単です。キヌず倀のペアのリストを远加するだけで、キヌは眮換する文字列であり、倀は眮換するものです。

rollup.config.js
 // Rollup plugins import babel from 'rollup-plugin-babel'; import eslint from 'rollup-plugin-eslint'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import replace from 'rollup-plugin-replace'; export default { entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline', plugins: [ resolve({ jsnext: true, main: true, browser: true, }), commonjs(), eslint({ exclude: [ 'src/styles/**', ] }), babel({ exclude: 'node_modules/**', }), replace({ exclude: 'node_modules/**', ENV: JSON.stringify(process.env.NODE_ENV || 'development'), }), ], };


この構成では、ENVをprocess.env.NODE_ENVNodeアプリケヌションで環境倉数を蚭定する通垞の方法たたは「開発」ず蚘述しおいたす。 JSON.stringifyを䜿甚しお、二重匕甚笊で囲たれた倀を取埗したす。

サヌドパヌティのコヌドの問題を排陀するために、node_modulesディレクトリずそれに含たれるすべおのパッケヌゞを無芖するようにexcludeプロパティを蚭定したす。  この件に぀いお@wesleycoderに感謝したす 。

結果を確認する

ビルドを再構築しお、ブラりザを確認したしょう。 コン゜ヌルのログは、以前ず倉わらないはずです。 これは良いこずです-これはデフォルト倀を䜿甚したこずを意味したす。
セットアップが機胜するこずを確認するには、プロダクションモヌドで再構築を実行したす。

 NODE_ENV=production ./node_modules/.bin/rollup -c

ご泚意
Windowsでは、 SET NODE_ENV = production ./node_modules/.bin/rollup -cを䜿甚しお、環境倉数を操䜜する際の゚ラヌを回避したす。 このコマンドに問題がある堎合、 詳现に぀いおはこの問題を参照しおください。

ペヌゞをリロヌドした埌、コン゜ヌルに䜕も曞き蟌たれないこずを確認しおください。

画像

ステップ6UGLIFYJSを远加しお、生成されたスクリプトを圧瞮および最小化する


, , UglifyJS . , , , «» — , .



UglifyJS , rollup-plugin-uglify .
:

 npm install --save-dev rollup-plugin-uglify

rollup.config.js

Uglify Rollup. , uglification :

rollup.config.js
 // Rollup plugins import babel from 'rollup-plugin-babel'; import eslint from 'rollup-plugin-eslint'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import replace from 'rollup-plugin-replace'; import uglify from 'rollup-plugin-uglify'; export default { entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline', plugins: [ resolve({ jsnext: true, main: true, browser: true, }), commonjs(), eslint({ exclude: [ 'src/styles/**', ] }), babel({ exclude: 'node_modules/**', }), replace({ ENV: JSON.stringify(process.env.NODE_ENV || 'development'), }), (process.env.NODE_ENV === 'production' && uglify()), ], };


uglify () , NODE_ENV «production».



, Rollup :

 NODE_ENV=production ./node_modules/.bin/rollup -c

, . , build/js/main.min.js :

画像

~ 42 . UglifyJS, ~ 29 — 30% .

→ ゜ヌス

:

rollup , webpack( ), , , . , , , (tree-shaking) . , , , .

Source: https://habr.com/ru/post/J331412/

More articles:


All Articles