前端項目工程化構建工具也發展好幾年了,生態演化,慢慢發展出了不少好的構建項目的工具,從最開始的grunt
,gulp
到webpack
,前端的工程化愈來愈方便,給前端帶到了一個美好的時代。html
目前,社區中比較火的一個構建工具,是rollup
,用rollup
來打包模塊化的JavaScript
代碼很是的便利。它使用ES6
中的新的語法標準來打包模塊化的代碼,將代碼拆分紅多個小的模塊化的代碼片斷,很是適合JavaScript
類庫,插件,和應用的開發。還有一個優勢(Tree Shaking
),就是rollup
能夠按需打包代碼,對於系統中引入了可是沒有使用的代碼,不會打包到最終文件中。前端
開始以前,須要作一些準備:node
安裝了nodejs
和npm
(或者你也能夠使用yarn
)react
瞭解ES6
中modules
的概念webpack
熟練使用命令行工具git
熟悉gulp
,webpack
(不熟悉也無妨)github
首先,須要把rollup
安裝到全局空間:web
npm install --global rollup (或者使用縮寫:npm i -g rollup)
全局安裝rollup
以後,就能夠使用配置文件的命令行接口或者使用JavaScript API
接口來打包JavaScript
代碼。npm
假設你要打包的入口文件是main.js
,想要把main.js
裏引入的全部文件都打包成bundle.js
。
Rollup
提供了多種打包方式,經過format
屬性能夠設置你想要打包成的代碼類型:
amd - 輸出成AMD
模塊規則,RequireJS
能夠用
cjs - CommonJS
規則,適合Node
,Browserify
,Webpack
等
es - 默認值,不改變代碼
iife - 輸出自執行函數,最適合導入html
中的script
標籤,且代碼更小
umd - 通用模式,amd
,cjs
,iife
都能用
根據使用場景,配置不一樣的format
屬性來打包文件。
瀏覽器使用:
# 編譯成一個自執行函數,能夠直接在 html 中的 script 標籤直接引入 $ rollup main.js --format iife --output bundle.js
Nodejs使用:
# 編譯成 CommonJS 模塊 $ rollup main.js --format cjs --output bundle.js
瀏覽器和Nodejs通用:
# UMD 模式須要設置一個大報名 $ rollup main.js --format umd --name "myBundle" --output bundle.js
開始以前,先在本地建立一個項目,並在根目錄經過 npm init
建立一個package.json
文件,構建一個用npm
來管理依賴的項目。
將rollup
安裝到項目本地:
npm i --save-dev rollup //--save-dev表示將rollup安裝到開發環境依賴中
在項目根目錄下建立rollup
的配置文件,以下:
// rollup.config.js export default { entry: 'src/main.js', //打包入口文件 format: 'iife', //iife模式,適用於瀏覽器 sourceMap: true, //啓用sourcemap dest: 'dist/bundle.js' //等價於 --output,打包目標文件 };
src/main.js
,編寫入口文件,文件中使用了ES6
中的class
語法。//src/main.js class Customer { constructor(name) { this.name = name; } sayHi() { console.log(`The name is: ${this.name}`) console.info(`foo's Uppercase: ${_.upperCase('foo')}`) } } let kevin = new Customer('kevin'); kevin.sayHi();
{ "scripts": { "build": "rollup -c" //-c參數全稱是 --config,表示使用配置文件 } }
上面的build命令:rollup -c
會默認使用項目根目錄下的 rollup.config.js
做爲項目的rollup
配置文件。若是你想自定義使用其餘文件做爲配置文件,能夠經過參數來指定文件。當對一個應用系統針對不一樣環境配置多個配置文件的時候特別適用。以下,對開發環境和生產環境分別使用兩套配置文件進行項目的配置。
rollup --config rollup.config.dev.js rollup --config rollup.config.prod.js //或者,使用簡寫 rollup -c rollup.config.dev.js rollup -c rollup.config.prod.js
配置好上面的內容,就能夠開始對 src/main.js
進行打包了。
在命令行中,項目根目錄下,執行命令:
npm run build
執行完以後,會看到項目根目錄下,生成了一個新的目錄:dist
。在 dist
目錄下,有兩個文件,分別是打包以後的js文件:bundle.js
和 bundle.js
對應的map文件:bundle.js.map
。
打開bundle.js
文件,看到代碼以下:
(function () { 'use strict'; class Customer { constructor(name) { this.name = name; } sayHi() { console.log(`The name is: ${this.name}`); } } let kevin = new Customer('kevin'); kevin.sayHi(); }()); //# sourceMappingURL=bundle.js.map
能夠看到,rollup
將咱們的 src/main.js
打包成了一個新的js文件,並給它套上了一個自執行函數,文件最後有對應的map
文件映射聲明。
在上一步中,能夠看到rollup
將代碼很好的進行了打包處理。可是,咱們在main.js
中用的是ES6
的語法,打包以後仍是ES6
的語法,因爲目前瀏覽器還不能很好的兼容ES6
中的語法,因此,要想讓咱們的代碼在瀏覽器中完美的運行,須要使用babel
將ES6
的語法轉換成ES5
的語法。
爲了能很好的建立大型應用,拓展第三方插件等,rollup
提供了對第三方插件的支持,在配置文件中添加plugins
來實現插件的引入。
要添加babel
,須要引入插件 rollup-plugin-babel
,使用npm來安裝:
npm i -D rollup-plugin-babel --save-dev
除了babel
插件,還須要安裝ES6的語法插件 babel-preset-es2015-rollup
:
npm i -D babel-preset-es2015-rollup --save-dev
在項目的根目錄下建立babe的配置文件 .babelrc
:
//.babelrc { "presets": [ ["latest", { "es2015": { "modules": false } }] ], "plugins": ["external-helpers"] }
準備好上述內容,就查最後一步,引入babel
轉換器了。修改rollup
的配置文件以下:
import babel from 'rollup-plugin-babel'; export default { entry: 'src/main.js', format: 'iife', dest: 'dist/bundle.js', sourceMap: true, plugins: [ babel({ exclude: 'node_modules/**' }) ] }
修改好配置文件以後,執行一次npm run build
,再從新查看dist/bundle.js
:
(function () { 'use strict'; var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; var createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var Customer = function () { function Customer(name) { classCallCheck(this, Customer); this.name = name; } createClass(Customer, [{ key: 'sayHi', value: function sayHi() { console.log('The name is: ' + this.name); } }]); return Customer; }(); var kevin = new Customer('kevin'); kevin.sayHi(); }()); //# sourceMappingURL=bundle.js.map
能夠看到,bundle.js
中已是轉換成ES5
以後的代碼了。
json
文件,能夠引入插件rollup-plugin-json
:npm i --save-dev rollup-plugin-json
更新rollup
配置文件:
import json from 'rollup-plugin-json'; //更新`plugins`屬性 plugins: [ babel({ exclude: 'node_modules/**' }), json() ]
rollup-plugin-node-resolve
:npm install --save-dev rollup-plugin-node-resolve
更新rollup
配置文件:
//引入插件 import resolve from 'rollup-plugin-node-resolve'; //更新`plugins`屬性 plugins: [ resolve(), babel({ exclude: 'node_modules/**' }), json() ]
rollup-plugin-commonjs
一些類庫導出的是ES6
語法的代碼,可是在npm
上大部分模塊都是以CommonJS
模式輸入模塊,因此在rollup
上處理這些模塊以前,咱們須要將代碼從CommonJS
轉換成ES6
。
這個時候,就須要安裝插件rollup-plugin-commonjs
。
須要注意的是,爲了不這種轉換破壞代碼結構,rollup-plugin-commonjs
的須要在其餘插件以前執行。
rollup-plugin-uglify
要想讓打包的文件更小,還須要一個uglify
插件:rollup-plugin-uglify
。
npm install --save-dev rollup-plugin-uglify
更新rollup
配置文件:
//引入插件 import uglify from 'rollup-plugin-uglify'; //更新`plugins`屬性 plugins: [ resolve(), babel({ exclude: 'node_modules/**' }), json(), uglify() ]
本次配置示例代碼已放在GitHub上,點我查看
(待續。。。)
//TODO * 使用rollup引入同級依賴類庫 * vue項目開發環境配置 * react開發環境配置