Rollup.js 下一代的ES6模块打包机

Neilyo 发布于2019-08-21 13:30 / 2140人阅读

摘要：帮我们实现了，目前和都还不支持这一屌爆了的功能。如果你现在就想实现这一功能的话，你就可以尝试使用通过编译，中未调用的方法并未打包到新的中。代码如下使用方法使用工具来搞定打包功能。首先在根目录建立和文件这个是工具的标配。

在我们模块化项目时，经常调用一个模块，使用了其中一个方法，其它N多的方法我们未调用，我们希望未调用到的方法或者变量忽略它们，并且不打包到js文件中，这样在大项目里面可以显著减少文件的体积，特别在移动终端，虽然4G非常快，但是我还是希望更省流量。

ES6帮我们实现了，目前 webpack 和 browserify 都还不支持这一屌爆了的功能。如果你现在就想实现这一功能的话，你就可以尝试使用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中未调用的方法 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 – 使用于

GPU云服务器云服务器 java打包的方式服务器的网站怎么打包 ES6 es6-系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87703.html

手把手带你走进下一代的ES6模块打包工具—Rollup

摘要：首先把这个示例仓库下载到本地准备就绪，正文开始简介以下内容基于和这两个打包工具来展开。但是目前，中的大多数包都是以模块的形式出现的。在它们更改之前，我们需要将模块转换为供处理。可以在中把注释掉看看打包后的文件，会把整个打包进来。本文一共七个例子，由浅入深带你熟悉Rollup。首先把 rollup-demos 这个示例仓库下载到本地 mkdir rollup cd rollup git...

李文鹏 2019-08-22 11:22 评论0 收藏0
Rollup 试炼之路

摘要：根据官网的解释，是下一代模块化工具。之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。从的人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。最近看到挺多次 Rollup 这个词，再也架不住好奇，简单的学习实践了一下。完整项目库地址请戳。 PS: ES6 对应 ES2015，请忽略这些细节。什么是 Rollup Rollup...

qc1iu 2019-08-22 11:00 评论0 收藏0
我他喵的到底要怎样才能在生产环境中用上 ES6 模块化？

摘要：因此，你还是需要各种各样杂七杂八的工具来转换你的代码噢，我可去你妈的吧，这些东西都是干嘛的我就是想用个模块化，我到底该用啥子本文正旨在列出几种可用的在生产环境中放心使用模块化的方法，希望能帮到诸位后来者这方面的中文资源实在是忒少了。原文发表在我的博客上。最近捣鼓了一下 ES6 的模块化，分享一些经验 :) Python3 已经发布了九年了，Python 社区却还在用 Python 2...

KaltZK 2019-08-20 17:47 评论0 收藏0
JS打包工具rollup——完全入门指南

摘要：使用进行模块化打包在之前打包的过程中，命令行中输出了一行，这表示并没有收到任何模块化的格式指令，因此会用默认的模块标准来对文件进行打包。前言最近在做一个提供给浏览器和node同时使用的js的url模板工具类，在用什么打包工具上纠结了一段时间，正好有一天在知乎上看到了关于rollup的介绍，在自己试了试之后，就决定用rollup.js来打包自己的工具类了。这篇文章主要是为了让对ro...

dreamtecher 2019-08-21 11:53 评论0 收藏0
JavaScript从初级往高级走系列————ES6

摘要：采用二八定律，主要涉及常用且重要的部分。对象是当前模块的导出对象，用于导出模块公有方法和属性。箭头函数函数箭头函数把去掉，在与之间加上当我们使用箭头函数时，函数体内的对象，就是定义时所在的对象，而不是使用时所在的对象。 ES6 原文博客地址：https://finget.github.io/2018/05/10/javascript-es6/ 现在基本上开发中都在使用ES6，浏览器环境...

孙淑建 2019-08-23 13:45 评论0 收藏0