使用rollup打包JS的方法步骤


Posted in Javascript onDecember 05, 2018

rollup 采用 es6 原生的模块机制进行模块的打包构建,rollup 更着眼于未来,对 commonjs 模块机制不提供内置的支持,是一款更轻量的打包工具。rollup 比较适合打包 js 的 sdk 或者封装的框架等,例如,vue 源码就是 rollup 打包的。而 webpack 比较适合打包一些应用,例如 SPA 或者同构项目等等。

创建项目

目录结构是这样的:

hey-rollup/
├── dist
│  ├── bundle-name.js
│  └── bundle-name.min.js
├── example
│  ├── dist
│  │  └── example.js
│  ├── index.html
│  └── index.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
│  └── index.js
└── test
  └── index.js

你可以在你的终端中执行下面的命令来安装此项目

# cd /path/to/your/projects
git clone https://github.com/daixwu/hey-rollup.git

安装 Rollup

通过下面的命令安装Rollup:

npm install --save-dev rollup

创建配置文件

在 hey-rollup 文件夹中创建一个新文件 rollup.config.js。之后在文件中添加下面的内容:

export default {
 input: "src/main.js",
 output: {
  file: "dist/js/main.min.js",
  format: "umd",
  name: 'bundle-name'
 }
};

下面是每一个配置选项都做了些什么:

  • input —— 要打包的文件
  • output.file —— 输出的文件 (如果没有这个参数,则直接输出到控制台)
  • output.format —— Rollup 输出的文件类型 (amd, cjs, es, iife, umd)
    • amd ? 异步模块定义,用于像 RequireJS 这样的模块加载器
    • cjs ? CommonJS,适用于 Node 和 Browserify/Webpack
    • es ? 将软件包保存为 ES 模块文件
    • iife ? 一个自动执行的功能,适合作为 <script> 标签。(如果要为应用程序创建一个捆绑包,您可能想要使用它,因为它会使文件大小变小。)
  • umd ? 通用模块定义,以 amd,cjs 和 iife 为一体
  • output.name --生成包名称,代表你的 iife/umd 包,同一页上的其他脚本可以访问它(iife/umd 没有 name 会报错的)

搭配 babel 7

rollup 的模块机制是 ES6 Modules,但并不会对 es6 其他的语法进行编译。因此如果要使用 es6 的语法进行开发,还需要使用 babel 来帮助我们将代码编译成 es5。

这种强需求,rollup 当然提供了解决方案。

安装模块

rollup-plugin-babel 将 rollup 和 babel 进行了完美结合。

npm install --save-dev rollup-plugin-babel@latest

创建 .babelrc

{
  "presets": [
   [
    "@babel/preset-env",
    {
     "modules": false
    }
   ]
  ]
}

更新 rollup.config.js

import babel from "rollup-plugin-babel";

export default {
 plugins: [
  babel({
   exclude: 'node_modules/**',
  }),
 ],
};

为了避免转译第三方脚本,我们需要设置一个 exclude 的配置选项来忽略掉 node_modules 目录

babel 7 必要模块

npm install --save-dev @babel/core

npm install --save-dev @babel/preset-env

ESLint 检查

在你的代码中使用 linter 无疑是十分好的决定,因为它会强制执行一致的编码规范来帮助你捕捉像是漏掉了括弧这种棘手的 bug。

在这个项目中,我们将会使用 ESLint。

安装模块

为了使用 ESLint,我们将要安装 ESLint Rollup plugin

npm install --save-dev rollup-plugin-eslint

生成一个 .eslintrc.json

为了确保我们只获取我们想要的错误,我们需要首先配置 ESLint。这里可以通过下面的代码来自动生成大多数配置:

./node_modules/.bin/eslint --init

更新 rollup.config.js

接下来,import ESLint 插件并将它添加到 Rollup 配置中:

import eslint from 'rollup-plugin-eslint';

export default {
 plugins: [
  eslint({
   exclude: [
    throwOnError: true,
    throwOnWarning: true,
    include: ['src/**'],
    exclude: ['node_modules/**']
   ]
  }),
 ],
};

eslint插件有两个属性需要说明:throwOnError 和 throwOnWarning 设置为 true 时,如果在 eslint 的检查过程中发现了 error 或warning,就会抛出异常,阻止打包继续执行(如果设置为false,就只会输出eslint检测结果,而不会停止打包)

兼容 commonjs

npm 生态已经繁荣了多年,commonjs 规范作为 npm 的包规范,大量的 npm 包都是基于 commonjs 规范来开发的,因此在完美支持 es6 模块规范之前,我们仍旧需要兼容 commonjs 模块规范。

rollup 提供了插件rollup-plugin-commonjs ,以便于在 rollup 中引用 commonjs 规范的包。该插件的作用是将 commonjs 模块转成 es6 模块。

rollup-plugin-commonjs 通常与 rollup-plugin-node-resolve 一同使用,后者用来解析依赖的模块路径。

安装模块

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

更新 rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
 plugins: [
  resolve({
   jsnext: true,
   main: true,
   browser: true,
  }),
  commonjs(),
  babel({
   exclude: 'node_modules/**',
  }),
 ],
};

注意: jsnext 表示将原来的 node 模块转化成 ES6 模块,main 和 browser 则决定了要将第三方模块内的哪些代码打包到最终文件中。

替代环境变量

安装模块

rollup-plugin-replace 本质上是一个用来查找和替换的工具。它可以做很多事,但对我们来说只需要找到目前的环境变量并用实际值来替代就可以了。(例如:在 bundle 中出现的所有 ENV 将被 "production" 替换)

npm install --save-dev rollup-plugin-replace

更新 rollup.config.js

配置很简单:我们可以添加一个 key:value 的配对表,key 值是准备被替换的键值,而 value 是将要被替换的值。

import replace from "rollup-plugin-replace";

export default {
 plugins: [
  replace({
   ENV: JSON.stringify(process.env.NODE_ENV || "development")
  })
 ]
};

在我们的配置中找到每一个 ENV 并用 process.env.NODE_ENV 去替换,SON.stringify 用来确保值是双引号的,不像 ENV 这样。

压缩 bundle

添加 UglifyJS 可以通过移除注上释、缩短变量名、重整代码来极大程度的减少 bundle 的体积大小 —— 这样在一定程度降低了代码的可读性,但是在网络通信上变得更有效率。

安装插件

用下面的命令来安装rollup-plugin-uglify :

npm install --save-dev rollup-plugin-uglify

更新 rollup.config.js

接下来,让我们在 Rollup 配置中添加 Uglify 。然而,为了在开发中使代码更具可读性,让我们来设置只在生产环境中压缩混淆代码:

import uglify from "rollup-plugin-uglify";

export default {
 plugins: [
  process.env.NODE_ENV === "production" && uglify()
 ]
};

这里使用了短路计算策略,只有在 NODE_ENV 设置为 production 时加载 uglify()。

完整配置

最后附上我的 rollup.config.js 配置

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { eslint } from 'rollup-plugin-eslint';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';

const packages = require('./package.json');

const ENV = process.env.NODE_ENV;

const paths = {
  input: {
    root: ENV === 'example'
      ? 'example/index.js'
      : 'src/index.js',
  },
  output: {
    root: ENV === 'example'
      ? 'example/dist/'
      : 'dist/',
  },
};

const fileNames = {
  development: `${packages.name}.js`,
  example: `example.js`,
  production: `${packages.name}.min.js`
};

const fileName = fileNames[ENV];

export default {
  input: `${paths.input.root}`,
  output: {
    file: `${paths.output.root}${fileName}`,
    format: 'umd',
    name: 'bundle-name'
  },
  plugins: [
    resolve(),
    commonjs(),
    eslint({
      include: ['src/**'],
      exclude: ['node_modules/**']
    }),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true,
    }),
    replace({
      exclude: 'node_modules/**',
      ENV: JSON.stringify(process.env.NODE_ENV),
    }),
    (ENV === 'production' && uglify()),
  ],
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
微信小程序入门之广告条实现方法示例
Dec 05 #Javascript
Vue实现本地购物车功能
Dec 05 #Javascript
node和vue实现商城用户地址模块
Dec 05 #Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 #Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 #Javascript
详解angularjs4部署文件过大解决过程
Dec 05 #Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
You might like
PHP中的类-什么叫类
2006/11/20 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
初中军训感想300字
2014/03/05 职场文书
十八届三中全会感言
2014/03/10 职场文书
公立医院改革实施方案
2014/03/14 职场文书
房产公证委托书范本
2014/09/20 职场文书
单位委托函范文
2015/01/29 职场文书
就业推荐表院系意见
2015/06/05 职场文书
生活小常识广播稿
2015/08/19 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python