Rollup + TypeScript + Babel + IE11 构建
发布:elantion 日期:2021-04-03 阅读:1802 评论:0
这几天在研究某个项目的构建流,几乎把前端所有的构建工具试了遍,好累呀。这次轮到Rollup了,据说速度也是很快,并且原生支持ESModule,是未来趋势的产品,这儿记录下流程,看看大伙有类似的工作就可以参考下。
安装
用 npm、yarn 都行,下面用 npm 演示吧,安装 Rollup 和插件:
- @rollup/plugin-node-resolve : 用于引用解释(import, require等等)
- @rollup/plugin-babel:Babel 的 Rollup 插件
- @rollup/plugin-commonjs:用于转译commonjs的依赖包
npm i rollup @rollup/plugin-babel @rollup/plugin-node-resolve
然后安装 Babel (我们直接用 Babel 转 TypeScript 即可,不用再装 TypeScript 的 Rollup 插件了,避免冲突):
npm i @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime
不用安装TypeScript的插件,Babel已经内置了。
大概就这些了。
配置
配置跟 Webpack 差不多,但功能比 Webpack 弱得多,毕竟还年轻,以下是混合 Babel + Rollup + browserslist 的配置,如果想好看点,可以把 Babel (babel.config.json) 和 Browserslist (.browserslistrc)的配置独立出来,这里为了简单就展示混合的了:
// rollup.config.js
import rollupBabel from '@rollup/plugin-babel';
import rollupNodeResolve from '@rollup/plugin-node-resolve';
import rollupCommonjs from '@rollup/plugin-commonjs';
const extensions = ['.js', '.ts'];
/**
* @type {import('@rollup/plugin-babel').RollupBabelInputPluginOptions}
*/
const babelRollupConfig = {
babelHelpers: 'runtime',
presets: [
[
'@babel/env',
{
targets: 'chrome > 37',
},
],
],
extensions,
plugins: [['@babel/plugin-transform-runtime']],
};
/**
* @type {import('rollup').RollupOptions}
*/
const rollupConfig = {
input: ['./index.ts'],
output: {
file: 'bundle.js',
},
plugins: [
rollupBabel(babelRollupConfig),
rollupNodeResolve({
extensions,
}),
rollupCommonjs(),
],
};
module.exports = rollupConfig;
配置并不像webpack那样高度集成,很多东西需要插件配合,例如想引用commonjs的包就必须使用@rollup/plugin-commonjs
来帮忙转译,不然就会报错,感觉这种配置很多余。虽然看配置起来有点多,但这上面的配置每一个都有它的用处,缺一不可,已经是最精简的配置了。之后执行编译命令即可构建:
rollup -c
速度还行,往后等项目变大了,再观察其效率。
后话
以上配置是最基础的,如果想引用vue、react等工具,还要进一步配置,这里就不展开了,大家有兴趣可以自已尝试下。