學習rollup.js模塊文件打包

時間  2019-11-18
標籤 學習 rollup.js rollup 模塊 文件 打包 欄目 JavaScript 简体版
原文   原文鏈接

學習rollup.js模塊文件打包html

一：rollup 是什麼？
Rollup 是一個 JavaScript 模塊打包器，能夠將小塊代碼編譯成大塊複雜的代碼.node

webpack 和 Rollup 對比不一樣點：webpack

webpack支持在項目中使用對項目進行打包，webpack的核心功能包括 code-splitting（按需加載js）和 static assets（資源文件處理）。es6

rollup 適合使用在獨立的js庫中進行打包。可是目前還不支持 code-splitting 和 熱更新，更趨向專一於構建分類的js庫，也就是說大多
只會生成一個js文件來被其餘項目依賴，更好地利用 es6 modules的優點來縮小和優化代碼。web

Tree-shaking
在rollup編譯模塊的過程當中，經過Tree-shaking的方式來去掉模塊中未使用到的代碼，僅僅保留被咱們調用到的代碼來減小文件的大小。npm

rollup命令安裝以下：
命令：npm install -g rollup 進行安裝。json

好比咱們看一個demo代碼以下：數組

新建文件夾 roll, 文件夾內有以下文件 main.js 和 index.js； 及 index.html文件；瀏覽器

main.js 代碼以下：app

export function aa(x) {
  return x * x;
}

export function bb(y) {
  return y + y;
}

index.js 代碼以下：

import { bb } from './main.js';

console.log(bb(5));

如上代碼能夠看到，main.js 內有兩個函數 aa, 和 bb， 可是在index.js內，並無使用aa這個函數，當咱們使用 rollup進行模塊打包
的時候，會把未調用到的函數會去掉，這樣的話，能夠使多餘代碼去掉，使得文件更小。

rollup 打包有如下幾種方式：
1. 對於瀏覽器 能夠有以下命令：

rollup index.js -o bundle2.js -f iife

最後生成 bundle2.js 代碼以下樣子：

(function () {
'use strict';

function bb(y) {
  return y + y;
}

console.log(bb(5));

}());

2. 對於Node.js 代碼以下樣子：（編譯成CommonJS的模塊樣子）
rollup index.js -o bundle.js -f cjs
如上命令 -f 是 (--output.format的縮寫)，指定了所建立的bundle的類型，這裏是CommonJS(在Node.js中運行的)。
最後生成 bundle.js 代碼以下樣子：

'use strict';

function bb(y) {
  return y + y;
}

console.log(bb(5));

3. 對於瀏覽器和 Node.js(使用UMD format requires a bundle name):
rollup index.js -o bundle3.js -f umd --name 'myBundle'
最後生成 bundle3.js 代碼以下樣子：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (factory());
}(this, (function () { 'use strict';

function bb(y) {
  return y + y;
}

console.log(bb(5));

})));

二：使用配置文件

rollup 也能夠和webpack同樣使用配置文件來進行打包了，rollup的默認配置文件就叫 rollup.config.js， 我在roll文件夾下 新建一個roll.config.js後，而後添加以下代碼：

export default {
  input: './main.js',
  output: {
    file: 'bundle4.js',
    format: 'cjs'
  }
}

而後在roll文件夾內， 運行命令 rollup -c 來使用配置文件，就會在roll項目文件夾內生成 bundle4.js文件，裏面生成後的代碼
以下：

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function aa(x) {
  return x * x;
}

function bb(y) {
  return y + y;
}

exports.aa = aa;
exports.bb = bb;

注意：Rollup自己會處理配置文件，因此能夠使用 export default的語法，代碼不會通過Babel等相似工具編譯，因此只能使用
所用node.js版本支持es2015語法。

默認的配置文件叫 rollup.config.js, 咱們也能夠叫不一樣的名字，好比叫 rollup.config.dev.js或roll.config.prod.js，
所以咱們容許命令的時候能夠以下運行： rollup --config rollup.config.dev.js

rollup 配置選項以下：

input: 這個包的入口點 好比我上面包的入口點爲 main.js

output: {
  file: 'bundle4.js',
  format: 'cjs',
  name: 'MyBundle'
}

output.file: 要寫入的文件，也能夠用於生成的sourcemaps。
output.format 生成包的格式，有以下格式：

1. amd -- 異步模塊定義，用於像RequestJS這樣的模塊加載器。
2. cjs -- CommonJS, 適用於Node或Browserify/webpack
3. es -- 將軟件包保存爲ES模塊文件。
4. iife -- 一個自動執行的功能，適合做爲 <script>標籤這樣的。
5. umd -- 通用模塊定義，以amd, cjs, 和 iife 爲一體。

output.name： 表明iife/umd 包，同一頁上的其餘的腳本能夠訪問，好比：配置文件以下：

export default {
  input: './main.js',
  output: {
    file: 'bundle5.js',
    format: 'iife',
    name: 'MyBundle1'
  }
}

最後生成 bundle5.js 代碼變爲以下：

var MyBundle1 = (function (exports) {
  'use strict';
  function aa(x) {
    return x * x;
  }
  function bb(y) {
    return y + y;
  }
  exports.aa = aa;
  exports.bb = bb;
  return exports;
}({}));

下面分別看看以 amd， cjs， es， iife 及 umd 打包生成後的文件進行對比下，看看他們打包後的代碼分別是什麼樣的：

1-1 amd配置文件以下(rollup.config.js)：

export default {
  input: './main.js',
  output: {
    file: 'amd.js',
    format: 'amd',
    name: 'AMD'
  }
}

打包後生成的amd.js以下：

define(['exports'], function (exports) { 'use strict';
  function aa(x) {
    return x * x;
  }
  function bb(y) {
    return y + y;
  }
  exports.aa = aa;
  exports.bb = bb;
  Object.defineProperty(exports, '__esModule', { value: true });
});

1-2 cjs配置文件以下(rollup.config.js)：

export default {
  input: './main.js',
  output: {
    file: 'cjs.js',
    format: 'cjs',
    name: 'CJS'
  }
}

打包後生成的cjs.js以下：

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function aa(x) {
  return x * x;
}

function bb(y) {
  return y + y;
}

exports.aa = aa;
exports.bb = bb;

1-3 es配置文件以下(rollup.config.js)：

export default {
  input: './main.js',
  output: {
    file: 'es.js',
    format: 'es',
    name: 'ES'
  }
}

打包後生成的es.js以下：

function aa(x) {
  return x * x;
}

function bb(y) {
  return y + y;
}

export { aa, bb };

1-4 iife配置文件以下(rollup.config.js)：

export default {
  input: './main.js',
  output: {
    file: 'iife.js',
    format: 'iife',
    name: 'IIFE'
  }
}

打包後生成的iife.js以下：

var IIFE = (function (exports) {
'use strict';

function aa(x) {
  return x * x;
}

function bb(y) {
  return y + y;
}

exports.aa = aa;
exports.bb = bb;

return exports;

}({}));

1-5 umd 配置文件以下(rollup.config.js)：

export default {
  input: './main.js',
  output: {
    file: 'umd.js',
    format: 'umd',
    name: 'UMD'
  }
}

打包後生成的umd.js以下：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.UMD = {})));
}(this, (function (exports) { 
  'use strict';
  function aa(x) {
    return x * x;
  }
  function bb(y) {
    return y + y;
  }
  exports.aa = aa;
  exports.bb = bb;
  Object.defineProperty(exports, '__esModule', { value: true });
})));

全部的配置選項以下：

// rollup.config.js
export default {
  // 核心選項
  input,        // 要打包的文件
  external,     // 將模塊ID的逗號分隔列表排除
  plugins,

  // 額外選項
  onwarn,

  // danger zone 
  acorn,
  context,
  moduleContext,
  legacy,

  output: {
    // 若是須要輸出多個，能夠爲數組

    // 核心選項
    file,    // 輸出的文件(若是沒有這個參數，則直接輸出到控制檯)
    format,  // 輸出的文件類型(amd， cjs, es, iife, umd)
    name,    // 生成UMD模塊的名字
    global,  // 以`module ID:Global` 鍵值對的形式，用逗號分隔開 任何定義在這裏模塊ID定義添加到外部依賴
                              
    // 額外選項
    paths,
    banner,  // 在打包好的文件的塊的外部(wrapper外部)的最頂部插入一段內容
    footer,  // 在打包好的文件的塊的外部(wrapper外部)的最底部插入一段內容
    intro,   // 在打包好的文件的塊的內部(wrapper內部)的最頂部插入一段內容
    outro,   // 在打包好的文件的塊的內部(wrapper內部)的最底部插入一段內容
    sourcemap,
    sourcemapFile,
    interop,

    // 高危選項
    exports,
    amd,
    indent,
    strict
  }
}

三：使用插件
目前爲止，咱們經過相對路徑，將一個入口文件和一個模塊建立了一個簡單的bundle.js， 可是當構建很是複雜的時候，咱們須要引入npm安裝模塊，經過Babel編譯代碼，和JSON文件打交道等。所以咱們能夠使用插件在打包過程當中更改Rollup的行爲。

3-1 rollup-plugin-json （使rollup從JSON文件中讀取數據）
將 rollup-plugin-json 安裝爲開發依賴。命令以下：
npm install --save-dev rollup-plugin-json

安裝以前，咱們在項目中新建或安裝一個 package.json; 具體安裝不介紹(使用npm init一直回車鍵便可)。

咱們先來更改 main.js文件代碼，代碼變成以下：

import { version } from './package.json';

export default function() {
  console.log('version ' +version);
}

在繼續編輯 rollup.config.js文件，加入 JSON插件。
代碼以下：

import json from 'rollup-plugin-json';

export default {
  input: './main.js',
  output: {
    file: 'pluginjson.js',
    format: 'cjs',
  },
  plugins: [ json() ]
}

最後會生成pluginjson文件代碼以下：

'use strict';

var version = "1.0.0";

function main() {
  console.log('version ' +version);
}

module.exports = main;

3-2 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 插件
這兩個插件可讓你加載 Node.js裏面的CommonJS模塊。
先安裝這兩個插件：
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs

更多關於 rollup 能夠看官網 http://www.rollupjs.com/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程