使用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 相关文章推荐
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
vue 实现把路由单独分离出来
Aug 13 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
第一节--面向对象编程
2006/11/16 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
js 目录列举函数
2008/11/06 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python 实现屏幕录制示例
2019/12/23 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
北京故宫的导游词
2015/01/31 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python