成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Rollup.js 下一代的ES6模塊打包機(jī)

Neilyo / 2146人閱讀

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

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

ES6幫我們實(shí)現(xiàn)了，目前 webpack 和 browserify 都還不支持這一屌爆了的功能。如果你現(xiàn)在就想實(shí)現(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 文件這個(gè)是 gulp 工具的標(biāo)配。如果你不知道怎么玩兒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 – 使用于

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87703.html

相關(guān)文章

  • 手把手帶你走進(jìn)下一代的ES6模塊打包工具—Rollup

    摘要：首先把這個(gè)示例倉(cāng)庫(kù)下載到本地準(zhǔn)備就緒，正文開始簡(jiǎn)介以下內(nèi)容基于和這兩個(gè)打包工具來展開。但是目前，中的大多數(shù)包都是以模塊的形式出現(xiàn)的。在它們更改之前，我們需要將模塊轉(zhuǎn)換為供處理?？梢栽谥邪炎⑨尩艨纯创虬蟮奈募?，會(huì)把整個(gè)打包進(jìn)來。 本文一共七個(gè)例子，由淺入深帶你熟悉Rollup。首先把 rollup-demos 這個(gè)示例倉(cāng)庫(kù)下載到本地 mkdir rollup cd rollup git...

    李文鵬 評(píng)論0 收藏0

  • Rollup 試煉之路

    摘要：根據(jù)官網(wǎng)的解釋，是下一代模塊化工具。之后，模塊化的寫法將更加的趨勢(shì)化，我們會(huì)將以前的文件切割成多個(gè)的細(xì)小模塊。從的人數(shù)上，還是持有很大的保留意見的，所有我個(gè)人可能會(huì)在一些小型或者快速項(xiàng)目中做嘗試而已。 最近看到挺多次 Rollup 這個(gè)詞，再也架不住好奇，簡(jiǎn)單的學(xué)習(xí)實(shí)踐了一下。完整項(xiàng)目庫(kù)地址請(qǐng)戳。 PS: ES6 對(duì)應(yīng) ES2015，請(qǐng)忽略這些細(xì)節(jié)。 什么是 Rollup Rollup...

    qc1iu 評(píng)論0 收藏0

  • 我他喵的到底要怎樣才能在生產(chǎn)環(huán)境中用上 ES6 模塊化？

    摘要：因此，你還是需要各種各樣雜七雜八的工具來轉(zhuǎn)換你的代碼噢，我可去你媽的吧，這些東西都是干嘛的我就是想用個(gè)模塊化，我到底該用啥子本文正旨在列出幾種可用的在生產(chǎn)環(huán)境中放心使用模塊化的方法，希望能幫到諸位后來者這方面的中文資源實(shí)在是忒少了。 原文發(fā)表在我的博客上。最近搗鼓了一下 ES6 的模塊化，分享一些經(jīng)驗(yàn) :) Python3 已經(jīng)發(fā)布了九年了，Python 社區(qū)卻還在用 Python 2...

    KaltZK 評(píng)論0 收藏0

  • JS打包工具rollup——完全入門指南

    摘要：使用進(jìn)行模塊化打包在之前打包的過程中，命令行中輸出了一行，這表示并沒有收到任何模塊化的格式指令，因此會(huì)用默認(rèn)的模塊標(biāo)準(zhǔn)來對(duì)文件進(jìn)行打包。 前言 最近在做一個(gè)提供給瀏覽器和node同時(shí)使用的js的url模板工具類，在用什么打包工具上糾結(jié)了一段時(shí)間，正好有一天在知乎上看到了關(guān)于rollup的介紹，在自己試了試之后，就決定用rollup.js來打包自己的工具類了。 這篇文章主要是為了讓對(duì)ro...

    dreamtecher 評(píng)論0 收藏0

  • JavaScript從初級(jí)往高級(jí)走系列————ES6

    摘要：采用二八定律，主要涉及常用且重要的部分。對(duì)象是當(dāng)前模塊的導(dǎo)出對(duì)象，用于導(dǎo)出模塊公有方法和屬性。箭頭函數(shù)函數(shù)箭頭函數(shù)把去掉，在與之間加上當(dāng)我們使用箭頭函數(shù)時(shí)，函數(shù)體內(nèi)的對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。 ES6 原文博客地址：https://finget.github.io/2018/05/10/javascript-es6/ 現(xiàn)在基本上開發(fā)中都在使用ES6，瀏覽器環(huán)境...

    孫淑建 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<