Rollup
-
Rollup与Webpack作用类似 -
Rollup更为小巧 - 仅仅是一款
ESM打包器 -
Rollup中并不支持类似HMR这种高级特性 -
Rollup并不是要与Webpack全面竞争, 只是提供一个充分利用ESM各项特性的高效打包器 - 如果想使用非
ESM，则需要额外配置
1. 快速上手
# 安装
yarn add rollup -D
# 执行
yarn rollup ./src/index.js --format iife
# 这里的 --format 是指定输出格式
# iife 是指浏览器中常用的 自调用函数
2. 配置文件
- 创建一个
rollup.config.js文件
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
}
}
# 有了配置文件执行命令 使用 --config 表明使用配置文件
yarn rollup --config
yarn rollup --config rollup.config.js # 指明使用的配置文件
3. 使用插件
如果需要加载其它类型资源模块或者在代码中要导入
CommonJS模块
插件是
Rollup唯一扩展途径eg
// yarn add rollup-plugin-json -D
import json from 'rollup-plugin-json'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
json()
]
}
// 在 main.js当中导入json中的值
import { name, version } from './package.json'
console.log(name)
console.log(version)
// 打包结果会只有 name和version 其它的被 Tree Snaking掉了
4. 加载 npm 模块
Rollup默认只能根据文件路径去加载本地模块，对于node_modules下的模块没法想Webpack那样导入
- 因此可使用插件
rollup-plugin-node-resolve
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
json(),
resolve()
]
}
// main.js 下载 lodash-es esm版本
console.log(lodashcamelCase('hello world'))
5. 加载 CommonJS 模块
- 官方给了插件支持
rollup-plugin-commonjs
import commonjs from 'rollup-plugin-commonjs'
export default {
plugins: [
commonjs()
]
}
6. 代码拆分
要使用代码拆分，--format格式必须是amd或commonjs
export default {
input: 'src/index.js',
output: {
// file: 'dist/bundle.js',
// format: 'iife'
dir: 'dist',
format: 'amd'
}
}
7. 多入口打包
多入口打包默认会提取公共模块，意味着会走代码拆分，所以format不能是
iife格式了
export default {
// 这两种都可以
// input: ['src/index.js', 'src/album.js'],
input: {
foo: 'src/index.js',
bar: 'src/album.js'
},
output: {
dir: 'dist',
format: 'amd'
}
}
<!-- 在浏览器端使用打包好的dist目录文件 -->
<!-- 需要引入require.js -->
<script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
8. Rollup / Webpack 的选择原则
-
Rollup的优势- 输出结果更加扁平
- 自动移除未引用代码
- 打包结果依然完全可读
-
Rollup的缺点- 加载非
ESM的第三方模块比较复杂 - 模块最终都被打包到一个函数中，无法实现
HMR - 浏览器环境中，代码拆分功能依赖
AMD库
- 加载非
如果我们正在开发应用程序
-
Rollup显得有点欠缺
如果我们正在开发框架或者类库
-
Rollup比较不错，因为在开发类库时很少依赖第三方模块
所以很多知名框架 / 库 都在使用 Rollup
tips: 社区中希望二者并存，希望更专业的工具做到更专业的事情
Webpack 大而全，Rollup 小而美
Parcel
1. Parcel 零配置的前端应用打包器 【一个字（舒服）】
希望给开发的体验是你想做什么，就去做什么。额外的事情就交给工具去做
-
Parcel首个版本发布于2017年 - 出现的原因是-当时的
Webpack使用上过于繁琐
# 安装
yarn add parcel-bundler -D
-
Parcel与Webpack一样，都支持以任意模块为打包入口 - 但官方建议以
.html为入口 - 因为html是我们运行在浏览器端的入口
yarn parcel src/index.html
# 会根据 index.html 当中的script标签引入的模块一直往下找
- 模块热替换是支持的
if (module.hot) {
module.hot.accept(() => {
console.log('hmr')
})
}
- 自动安装依赖
在代码中可以直接导入
import $ from 'jquery'
$('body').append('<h1>Hello World</h1>')
// 会自动安装 jquery
- 同样支持其它类型模块 - 也是零配置的
2. 如何以生产模式打包
# 使用 build 命令 后面跟上模块的入口文件就可以了
yarn parcel build src/index.html
对于相同体量的项目打包，parcel 的构建速度会比 webpack 快很多，因为在 parcel 内部它使用的是双进程同时去工作，充分发挥了多核 CPU 的性能，那 webpack 也可以使用叫做 happypack 的一个插件来去实现这一点
<font color="red">绝大部分项目还是用的 Webpack ，有更好的生态，Webpack 也越来越好用</font>
