使用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 相关文章推荐
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
微信小程序入门之广告条实现方法示例
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 过滤器实现代码
2010/08/09 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
js密码强度校验
2015/11/10 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
对python 命令的-u参数详解
2018/12/03 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
给学校的建议书
2014/03/12 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
低碳环保标语
2014/06/12 职场文书
五一口号
2014/06/19 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python