使⽤rollup打包JS的⽅法步骤
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
├── fig.js
├── src
│└── index.js
└── test
└── index.js
你可以在你的终端中执⾏下⾯的命令来安装此项⽬
# cd /path/to/your/projectsjs获取json的key和value
git clone github/daixwu/hey-rollup.git
安装 Rollup
通过下⾯的命令安装:
npm install --save-dev rollup
创建配置⽂件
在 hey-rollup ⽂件夹中创建⼀个新⽂件 fig.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 和 babel 进⾏了完美结合。
npm install --save-dev rollup-plugin-babel@latest
创建 .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}
更新 fig.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，我们将要安装
npm install --save-dev rollup-plugin-eslint
⽣成⼀个 .eslintrc.json
为了确保我们只获取我们想要的错误，我们需要⾸先配置 ESLint。这⾥可以通过下⾯的代码来⾃动⽣成⼤多数配置：
./node_modules/.bin/eslint --init
更新 fig.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 中引⽤ commonjs 规范的包。该插件的作⽤是将 commonjs 模块转成 es6 模块。
rollup-plugin-commonjs 通常与⼀同使⽤，后者⽤来解析依赖的模块路径。
安装模块
npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
更新 fig.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 则决定了要将第三⽅模块内的哪些代码打包到最终⽂件中。
替代环境变量
安装模块
本质上是⼀个⽤来查和替换的⼯具。它可以做很多事，但对我们来说只需要到⽬前的环境变量并⽤实际值来替代就可以了。（例如：在 bundle 中出现的所有 ENV 将被 "production" 替换）
npm install --save-dev rollup-plugin-replace
更新 fig.js
配置很简单：我们可以添加⼀个 key:value 的配对表，key 值是准备被替换的键值，⽽ value 是将要被替换的值。
import replace from "rollup-plugin-replace";
export default {
plugins: [
replace({
ENV: JSON.v.NODE_ENV || "development")
})
]
};
在我们的配置中到每⼀个 ENV 并⽤ v.NODE_ENV 去替换，SON.stringify ⽤来确保值是双引号的，不像 ENV
这样。
压缩 bundle
添加 UglifyJS 可以通过移除注上释、缩短变量名、重整代码来极⼤程度的减少 bundle 的体积⼤⼩ —— 这样在⼀定程度降低了代码的可读性，但是在⽹络通信上变得更有效率。
安装插件
⽤下⾯的命令来安装：
npm install --save-dev rollup-plugin-uglify
更新 fig.js
接下来，让我们在 Rollup 配置中添加 Uglify 。然⽽，为了在开发中使代码更具可读性，让我们来设置只在⽣产环境中压缩混淆代码：
import uglify from "rollup-plugin-uglify";
export default {
plugins: [
]
};
这⾥使⽤了短路计算策略，只有在 NODE_ENV 设置为 production 时加载 uglify()。
完整配置
最后附上我的 fig.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 = v.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: `${}`,
output: {
file: `${}${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.v.NODE_ENV),
}),
(ENV === 'production' && uglify()),
],
};
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。