Rollup + TypeScript + Babel + IE11 构建

发布:elantion 日期:2021-04-03 阅读:76 评论:0

这几天在研究某个项目的构建流,几乎把前端所有的构建工具试了遍,好累呀。这次轮到Rollup了,据说速度也是很快,并且原生支持ESModule,是未来趋势的产品,这儿记录下流程,看看大伙有类似的工作就可以参考下。

安装

用 npm、yarn 都行,下面用 npm 演示吧,安装 Rollup 和插件:

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等工具,还要进一步配置,这里就不展开了,大家有兴趣可以自已尝试下。