Rollup.js 下一代的ES6模塊打包機

Neilyo 發(fā)布于2019-08-21 13:30 / 2135人閱讀

摘要：幫我們實現(xiàn)了，目前和都還不支持這一屌爆了的功能。如果你現(xiàn)在就想實現(xiàn)這一功能的話，你就可以嘗試使用通過編譯，中未調(diào)用的方法并未打包到新的中。代碼如下使用方法使用工具來搞定打包功能。首先在根目錄建立和文件這個是工具的標配。

在我們模塊化項目時，經(jīng)常調(diào)用一個模塊，使用了其中一個方法，其它N多的方法我們未調(diào)用，我們希望未調(diào)用到的方法或者變量忽略它們，并且不打包到j(luò)s文件中，這樣在大項目里面可以顯著減少文件的體積，特別在移動終端，雖然4G非常快，但是我還是希望更省流量。

ES6幫我們實現(xiàn)了，目前 webpack 和 browserify 都還不支持這一屌爆了的功能。如果你現(xiàn)在就想實現(xiàn)這一功能的話，你就可以嘗試使用rollup.js

maths.js

export function square ( x ) {
    return x * x;
}
export function cube ( x ) {
    return x * x * x;
}

main.js

import { cube } from "./maths.js";
console.log( cube( 5 ) ); // 125

通過 rollup.js 編譯，maths.js中未調(diào)用的方法 square() 并未打包到新的js中。代碼如下：

(function () {
    "use strict";
    function cube ( x ) {
        return x * x * x;
    }
    console.log( cube( 5 ) ); // 125
}());

使用方法

使用gulp工具來搞定打包功能。首先在根目錄建立gulpfile.js 和 package.json 文件這個是 gulp 工具的標配。如果你不知道怎么玩兒gulp，你得先去研究研究

先安裝依賴模塊

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

gulpfile.js

var gulp        = require("gulp");
var fs          = require("fs");
var rollup      = require("rollup").rollup;
var commonjs    = require("rollup-plugin-commonjs");
var nodeResolve = require("rollup-plugin-node-resolve");

gulp.task("script", function () {
    return rollup({
        entry: "src/main.js",
        plugins: [
            nodeResolve({ jsnext: true }),
            commonjs()
        ]
    }).then(function (bundle) {
        // 輸出 bundle + sourcemap
        var result = bundle.generate({
            // output format - "amd", "cjs", "es6", "iife", "umd"
            // amd – 使用像requirejs一樣的銀木塊定義
            // cjs – CommonJS，適用于node和browserify / Webpack
            // es6 (default) – 保持ES6的格式
            // iife – 使用于