使用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代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
Vue.js表单控件实践
Oct 27 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
微信小程序入门之广告条实现方法示例
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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JS运动基础框架实例分析
2015/03/03 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python模块常用用法实例详解
2019/10/17 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
高中军训感言800字
2014/03/05 职场文书
欢迎标语大全
2014/06/21 职场文书
市场部经理岗位职责
2015/02/02 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS