目前主流的后端框架Vue和React都采用rollup进行封装。 为了探寻rollup的奥秘，让我们一步步探索，基于rollup搭建一个库打包脚手架，发布自己的库和组件。
前言
之所以写rollup文章，是因为作者最近想规范后端开发的业务流程和架构，并提供内部公共组件库和工具库供团队使用。 在查阅了大量资料，比较了webpack和rollup的异同后，我们最终选择rollup作为打包工具。 我们最终要以npm的形式安装我们的组件库和工具库：
// 安装
npm install @xuxi/tools
// 使用
import { sleep } from '@xuxi/tools'
让我们逐步回顾一下汇总配置流程和最佳实践。
汇总简介
Rollupisa 用于 JavaScript 的模块捆绑器，它将小段代码编译成更大、更复杂的东西，例如库或应用程序。 它使用 JavaScript ES6 修订版中包含的新标准化代码模块格式，而不是以前的特殊解决方案，例如 Common JS 和 AMD。
大致意思是Rollup是一个JavaScript模块打包器，可以将小段代码编译成大而复杂的代码，例如库或应用程序。 Rollup 使用一种新的标准化代码模块格式，该格式包含在 ES6 版本的 JavaScript 中，而不是像 CommonJS 和 AMD 这样的特殊解决方案。
rollup最大的亮点是Tree-shaking，它可以静态分析代码中的导入并排除任何未使用的代码。 这使我们能够在现有工具和模块的基础上进行构建，而无需删除额外的依赖项或扩大项目的规模。 如果使用webpack，虽然可以实现tree-shaking，但是需要自己配置并且打包后的代码非常臃肿，所以对于库文件和UI组件来说，rollup更适合。
搭建图书馆包装脚手架
1.开始使用rollup
首先我们安装 rollup：
npm i rollup -g
然后在本地创建一个项目：
mkdir -p my-project cd my-project
接下来，我们创建一个条目并编写以下代码：
// src/main.js
import say from './say.js';
export { say }
// src/say.js
export default function(name){
console.log(name)
};
基本代码准备好后，我们编写rollup配置文件（根目录下的rollup.config.js）：
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
这样我们就在终端执行：
// --config 或 -c 来使用配置文件 rollup -c
这样目录下就生成了一个bundle.js，这就是我们想要的打包文件。 我们还可以使用package.json来设置打包配置信息，并使用npmrunxxx来打包和测试代码。
2.rollup插件的使用
为了更灵活地打包库文件webpack 开发实战，我们可以配置rollup插件。 比较实用的插件有：
rollup-plugin-node-resolve — 帮助 Rollup 找到外部模块然后导出它们
rollup-plugin-commonjs — 将 CommonJS 模块转换为 ES2015 以供 Rollup 处理
rollup-plugin-babel—允许我们使用es6的新特性来编译代码
rollup-plugin-terser——压缩js代码，包括es6代码压缩
rollup-plugin-eslint—js 代码检查
用上面的插件封装一个库就足够了，但是如果你想实现react等组件的代码，可以使用更多的插件，这里就不一一介绍了。
我们可以这样使用，类似于webpack的插件配置：
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from "rollup-plugin-babel";
import { terser } from 'rollup-plugin-terser';
import { eslint } from 'rollup-plugin-eslint';
export default [
{
input: 'src/main.js',
output: {
name: 'timeout',
file: '/lib/tool.js',
format: 'umd'
},
plugins: [
resolve(), // 这样 Rollup 能找到 `ms`
commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块
eslint(),
babel(),
terser()
]
}
];
是不是很简单呢？ 个人认为配置比webpack简单很多。 通过上面的配置，即使能够实现基本的javascript文件打包，但还不够强大webpack 开发实战，我们会一步步细化配置。
3.使用babel编译es6代码
首先我们安装babel相关模块：
npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime
设置 .babelrc 文件后
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": "2.6.10",
"targets": {
"ie": 10
}
}
]
],
"plugins": [
// 解决多个地方使用相同代码导致打包重复的问题
["@babel/plugin-transform-runtime"]
],
"ignore": [
"node_modules/**"
]
}
@babel/preset-env 可以根据配置的目标浏览器或运行环境手动将 ES2015+ 代码转换为 es5。 需要注意的是，我们设置了 "modules": false，否则 Babel 会在 Rollup 有机会进行处理之前将我们的模块转换为 CommonJS，导致 Rollup 的某些处理失败。
为了解决多处使用相同代码导致的重复打包问题，我们需要在.babelrc的plugins中配置@babel/plugin-transform-runtime，同时需要更改rollup的配置文件：
babel({
exclude: 'node_modules/**', // 防止打包node_modules下的文件
runtimeHelpers: true, // 使plugin-transform-runtime生效
}),
如果你对babel不熟悉，可以阅读我之前的webpack文章或者去官网学习。
4.区分测试环境和开发环境
我们可以在package.json中配置不同的执行脚本和环境变量，为开发和生产做不同的配置：
// package.json
"scripts": {
"build": "NODE_ENV=production rollup -c",
"dev": "rollup -c -w",
"test": "node test/test.js"
},
我们可以自动导入NODE_ENV为生产和开发来区分生产和开发环境，然后在代码中通过process.env.NODE_ENV获取参数。 这里我们主要用它来设置开发环境中的代码不被压缩：
const isDev = process.env.NODE_ENV !== 'production'; // ... plugins: [ !isDev && terser() ]
使用eslint进行代码检查
我们可以使用前面提到的 rollup-plugin-eslint 来配置：
eslint({
throwOnError: true,
throwOnWarning: true,
include: ['src/**'],
exclude: ['node_modules/**']
})
然后改进 .eslintrc.js 以根据您自己的风格配置特定的测量：
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"ENV": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
]
}
};
详细的eslint配置可以去官网学习。
5.外部属性
使用rollup打包，我们需要在自己的库中使用第三方库，比如lodash等，并且我们不希望jquery出现在最终生成的打包文件中。 这时候我们就需要用到外部属性了。 例如我们使用lodash，
import _ from 'lodash'
// rollup.config.js
{
input: 'src/main.js',
external: ['lodash'],
globals: {
lodash: '_'
},
output: [
{ file: pkg.main, format: 'cjs' },
{ file: pkg.module, format: 'es' }
]
}
6.导入方式
我们可以将自己的代码导入commonjs模块、es模块、浏览器识别的模块中，并按如下形式设置：
{
input: 'src/main.js',
external: ['ms'],
output: [
{ file: pkg.main, format: 'cjs' },
{ file: pkg.module, format: 'es' },
{ file: pkg.module, format: 'umd' }
]
}
发布到 npm
如果你之前没有注册过npm账号，可以按照如下方式进行配置：
npm adduser
然后输入您的用户名、电子邮件和密码，最后使用 npmpublish 进行发布。 这是包配置文件 package.json：
{
"name": "@alex_xu/time",
"version": "1.0.0",
"description": "common use js time lib",
"main": "dist/tool.cjs.js",
"module": "dist/time.esm.js",
"browser": "dist/time.umd.js",
"author": "alex_xu",
"homepage": "https://github.com/MrXujiang/timeout_rollup",
"keywords": [
"tools",
"javascript",
"library",
"time"
],
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"build": "NODE_ENV=production rollup -c",
"dev": "rollup -c -w",
"test": "node test/test.js",
"pretest": "npm run build"
},
"files": [
"dist"
]
}
name是包的名称，可以直接写包名，比如loadash，或者添加域名，类似@koa/router，@前面是你的npm注册用户名。 key 是包的关键字。
发布后，我们可以使用类似以下的方法进行安装：
npm install @alex_xu/time
// 使用
import { sleep } from '@alex_xu/time'
// 或
const { sleep } = requrie('@alex_xu/time')
以下是安装截图：
你也可以在 npm 上搜索你自己的包：
是不是很有成就感呢？ 让我们使用你们一起开发的包吧！
终于
我已经把完整的配置文件发布到github了。 如果你想了解更多关于 webpack、gulp、css3、javascript、nodeJS、canvas 等。
我本人是一名从事多年开发的老Web后端程序员。 我目前正在辞去工作，去做我自己的网络后端私人定制课程。 明年初花了一个月的时间整理了一篇2019年最适合学习的网文。端到端的学习干货，各种框架都整理好了，献给每一位后端男伙伴，如果想要获取，可以关注我的头条号，后台私信我：后台，即可免费获取。
