99久视频,国产精品观看,国产精品久久久久久久一区二区

Webpack原理與實踐：關于如何選擇合適的打包工具Rollup和Webpack？

寫在前面

Rollup是一款ES Modules打包器，它也可以將項目中散落的細小模塊打包成整塊代碼，從而使得這些劃分的模塊可以更好地運行在瀏覽器或node.js環境。Rollup與webpack的作用非常類似，但是小巧的多，誕生的初衷就是希望能夠提供一個高效地ES Modules打包器，充分利用ES Modules的各項特性。

Rollup的使用

Rollup 對代碼模塊使用新的標準化格式，這些標準都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解決方案，如 CommonJS 和 AMD。ES6 模塊可以使你自由、無縫地使用你最喜愛的 library 中那些最有用獨立函數，而你的項目不必攜帶其他未使用的代碼。ES6 模塊最終還是要由瀏覽器原生實現，但當前 Rollup 可以使你提前體驗。

首先當然是需要執行安裝命令進行安裝rollup，接著就和webpack一樣需要配置相關的config文件。我們可以配置不同的配置文件直接用cli進行打包，但是如果添加更多地選項，這種命令行的方式就變得很麻煩。為此我們需要創建配置文件來囊括所需的選項，配置文件以rollup.config.js形式命名，比cli更加靈活。

$ npm i rollup -D

我們看到其實rollup配置和webpack大同小異，想要更詳細的配置項信息可以異步rollup官網。

//src/helloWorld.js
export default function sayHello(){
console.log("nihao");
}
//src/index.js
import sayHello from "./helloWorld"
sayHello()
//rollup.config.js
export default {
input:"src/index.js",//打包入口
output:{//文件輸出配置
file:"dist/bundle.cjs.js",//打包后生成的文件位置和文件名
format:"cjs",//文件的輸出格式，遵循cjs規范，這也是官方模塊化規范
name:"bundleName"//包的全局變量名
}
}

我們在package.json文件中配置的打包命令是"build":"rollup -c"，我們在執行打包命令npm run build后，看到生成的文件dist/bundle.cjs.js中的代碼是非常簡潔清爽的，可讀性非常強。

//dist/bundle.cjs.js
'use strict';
function sayHello(){
console.log("nihao");
}
sayHello();

接下來，我們就詳細談談rollup的相關配置問題，我們知道rollup默認采用的是ESM規范，但是如果你想使用CommonJS規范，你可以使用.cjs后綴進行區分：

//rollup.config.cjs
module.export = {
input:"src/index.js",
output:{
file:"dist/bundle.cjs.js",
format:"cjs"
}
}

前面我們已經創建了一個簡單的打包配置文件，但是當你需要創建更加復雜的bundles時，你將需要更大的彈性，比如：通過npm安裝導入模塊、通過babel編譯代碼，使用json配置文件等等。對此，我們可以使用plugins插件，通過在捆綁過程的關鍵點來改變rollup的行為。比如，我們可以使用@rollup/plugin-json插件來允許導入JSON文件，使用命令行npm install --save-dev @rollup/plugin-json安裝。

// src/main.js
import {version} from "../package.json";
export default function(){
console.log('version ' + version);
}
// rollup.config.js
import json from '@rollup/plugin-json';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
},
plugins: [json()]
};

這樣，執行npm run build命令進行打包，生成的文件是：

'use strict';
var version = '1.0.0';
function main() {
console.log('version ' + version);
}
module.exports = main;

當然，一些特殊的插件依賴于一些輸出，有關特定于輸出的插件可以做什么的技術細節，請參閱插件鉤子。如果一個不兼容的插件被用作特定于輸出的插件，那么 Rollup 會發出警告。

為了實踐那些依賴于輸出的插件，我們基于前面簡單的項目打包進行相關的配置，先執行命令行npm install --save-dev rollup-plugin-terser，

// rollup.config.js
import json from '@rollup/plugin-json';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/main.js',
output: [
{
file: 'bundle.js',
format: 'cjs'
},
{
file: 'bundle.min.js',
format: 'iife',
name: 'version',
plugins: [terser()]
}
],
plugins: [json()]
};

此時打包得到：

var version = (function () {
'use strict';
var n = '1.0.0';
return function () {
console.log('version ' + n);
};
})();

前面我們看到可以將多個文件的代碼打包成一個文件，那么當項目比較大的時候就需要對代碼進行分割。對于代碼分割，有時候 Rollup 會自動將代碼分割成塊，比如動態加載或多個入口點，還有一種方法可以通過 output.manualChunks 選項顯式告訴 Rollup 哪些模塊要分割成單獨的塊。

// src/main.js
export default function () {
import('./foo.js').then(({ default: foo }) => console.log(foo));
}

Rollup將會使用動態導入去創建一個分割的chunk文件，只在需要的時候進行加載。為了rollup能夠知道哪里是第二個chunk塊，可以通過設置--file設定規范，通過--dir創建導出目錄。

$ rollup src/main.js -f cjs -d dist

接下來將會創建一個包含兩個文件main.js和chunk-[hash].js的目錄dist，此處的[hash]是一個hash字符串。你可以設置你自己想要的文件命令模式，通過 output.chunkFileNames和output.entryFileNames 進行配置。

//→ main.js:
'use strict';
function main() {
Promise.resolve(require('./chunk-b8774ea3.js')).then(({ default: foo }) => console.log(foo));
}
module.exports = main;
//→ chunk-b8774ea3.js:
('use strict');
var foo = 'hello world!';
exports.default = foo;

Rollup的優勢是：

輸出結果更加扁平，執行效率更高
自動移除未引用代碼
打包結果依然完全可讀

Rollup的缺點是：

加載非ESM的第三方模塊比較復雜
因為模塊最終會都被打包到全局中，所以無法實現HMR
瀏覽器環境中，代碼拆分功能必須使用Require.js這樣的AMD庫

寫在最后

對于Webpack大而全，Rollup小而美，我的選擇基本原則是應用開發優先webpack，類庫或框架開發使用Rollup。這是因為在開發js庫時，webpack的繁瑣和打包后的文件體積太大，而rollup就是針對js庫和框架開發的，它只是生成代碼將我們的代碼轉為目標js。如果你想了解更多關于rollup的相關知識，可以閱讀(官方文檔)。

原文鏈接：https://mp.weixin.qq.com/s/-EGC59TKIwsNLwvBN2MXiw