Rollup + TypeScript + Babel + IE11 构建

这几天在研究某个项目的构建流，几乎把前端所有的构建工具试了遍，好累呀。这次轮到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等工具，还要进一步配置，这里就不展开了，大家有兴趣可以自已尝试下。