资讯专栏INFORMATION COLUMN

使用rollup构建你的JavaScript项目【一】

meislzhua / 589人阅读

摘要:浏览器使用编译成一个自执行函数,可以直接在中的标签直接引入使用编译成模块浏览器和通用模式需要设置一个大报名使用配置文件,来一个项目开始之前,先在本地创建一个项目,并在根目录通过创建一个文件,构建一个用来管理依赖的项目。

什么是Rollup?

前端项目工程化构建工具也发展好几年了,生态演化,慢慢发展出了很多好的构建项目的工具,从最开始的grunt,gulpwebpack,前端的工程化越来越方便,给前端带到了一个美好的时代。

目前,社区中比较火的一个构建工具,是rollup,用rollup来打包模块化的JavaScript代码非常的便利。它使用ES6中的新的语法标准来打包模块化的代码,将代码拆分成多个小的模块化的代码片段,非常适合JavaScript类库,插件,和应用的开发。还有一个优点(Tree Shaking),就是rollup可以按需打包代码,对于系统中引入了但是没有使用的代码,不会打包到最终文件中。

rollup快速入口:官网、GitHub

快速开始

开始之前,需要做一些准备:

安装了nodejsnpm(或者你也可以使用yarn

了解ES6modules的概念

熟练使用命令行工具

熟悉gulp,webpack(不熟悉也无妨)

首先,需要把rollup安装到全局空间:

 npm install --global rollup  (或者使用缩写:npm i -g rollup)

全局安装rollup之后,就可以使用配置文件的命令行接口或者使用JavaScript API接口来打包JavaScript代码。

使用命令行

假设你要打包的入口文件是main.js,想要把main.js里引入的所有文件都打包成bundle.js

Rollup提供了多种打包方式,通过format属性可以设置你想要打包成的代码类型:

amd - 输出成AMD模块规则,RequireJS可以用

cjs - CommonJS规则,适合NodeBrowserifyWebpack

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
使用配置文件,来rollup一个项目

开始之前,先在本地创建一个项目,并在根目录通过 npm init 创建一个package.json文件,构建一个用npm来管理依赖的项目。

rollup安装到项目本地:

npm i --save-dev rollup   //--save-dev表示将rollup安装到开发环境依赖中
创建 rollup.config.js

在项目根目录下创建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();
配置package.json的scripts
{
  "scripts": {
    "build": "rollup -c" //-c参数全称是 --config,表示使用配置文件
  }
}
自定义使用rollup配置文件

上面的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
build项目

配置好上面的内容,就可以开始对 src/main.js 进行打包了。

在命令行中,项目根目录下,执行命令:

npm run build

执行完之后,会看到项目根目录下,生成了一个新的目录:dist。在 dist目录下,有两个文件,分别是打包之后的js文件:bundle.jsbundle.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文件映射声明。

添加babel

在上一步中,可以看到rollup将代码很好的进行了打包处理。但是,我们在main.js中用的是ES6的语法,打包之后还是ES6的语法,由于目前浏览器还不能很好的兼容ES6中的语法,所以,要想让我们的代码在浏览器中完美的运行,需要使用babelES6的语法转换成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开发环境配置

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

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

相关文章

  • [译]教程:如何使用Rollup打包JavaScript

    摘要:教程如何使用打包通过这个系列教程一步一步学习如何使用更小更快的取代和打包文件。安装并且创建配置文件。提示是告诉我们实际需要哪些插件的集合。通过下面的命令安装两个插件更新然后,引入插件并添加进配置注意属性是为了帮助模块迁移到的一部分。 教程:如何使用Rollup打包JavaScript 通过这个系列教程一步一步学习如何使用更小更快的Rollup取代webpack和Browserify打包...

    luoyibu 评论0 收藏0
  • Webpack vs Rollup

    摘要:年月份的时候,将的构建工具换成了。的特点代码分割有两种组织模块依赖的方式,同步和异步。而目前在中大型项目中使用得非常广泛。更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者余伯贤授权网易云社区发布。 2017年4月份的时候,Facebook将React的构建工具换成了Rollup。很多人就有疑问了,Webpack不也是Facebook团队开发的吗,为什么不使用...

    Null 评论0 收藏0
  • [译]教程:如何使用Rollup打包样式文件并添加LiveReload

    摘要:通过这个教程学习如何使用打包工具配合来取代或处理样式文件。使用这个命令安装插件更新。如果你没有项目的副本,你可以通过这条命令克隆在结束这个状态下的项目为添加监听插件。在代码块内,添加如下内容简单起见我省略了文件的大部分内容 通过这个教程学习如何使用JavaScript打包工具Rollup配合PostCSS来取代Grunt或Gulp处理样式文件。 上一篇文章中,我们完成了使用Rollup...

    garfileo 评论0 收藏0
  • React文档翻译系列()安装

    摘要:文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译,因为自己在学习的时候,最开始通过看博客或者论坛等中文资料,有些内容是零零散散的接收,并没有给自己带来很好的效果,所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列(一)安装 原文地址:原文 本系列是针对React文档进行的翻译,因为自己在学习react的时候,最开始通过看博客或者论坛等中文资料,有些内容是零零散散的...

    Fourierr 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    FullStackDeveloper 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<