在 Rollup 中,创建 ESM 模块,除 Flow 外不使用 babel 转译

In Rollup, create ESM module with no babel transpiling except Flow

我正在尝试使用 Rollup 和 Babel 发布一个包含多种形式的 Flow 语法的库:

具体来说,我希望 ES 模块版本尽可能少地进行转译:它应该使用我编写的所有 ES6 功能。不过,我似乎无法阻止 Babel 向下转换为 ES5 - 它创建了一个 _objectSpread2() 函数并用它替换了每个扩展运算符。

我想使用 Babel 的唯一原因是 Flow 语法。具体来说,转换 class 属性 语法:

class Foo { 
  myProp = 1;
}

(独立工具flow-remove-types不转换class语法,所以它的输出是无效的JS)。

This 是当前过度转译到 ES5 的 Rollup 配置:

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import flow from 'rollup-plugin-flow';
export default [
    {
        input: 'src/index.js',
        output: [
            {
                file: 'dist/index.esm.js',
                format: 'esm', // ES2015 modules version so consumers can tree-shake
            },
        ],
        plugins: [flow(), commonjs(), nodeResolve()],
    },
];

即使我删除了预设,它仍然做同样的事情:

import babel from '@rollup/plugin-babel';
export default [
    {
        input: 'src/index.js',
        output: [
            {
                file: 'dist/index.esm.js',
                format: 'esm', // ES2015 modules version so consumers can tree-shake
            },
        ],
        plugins: [
            babel({
                presets: [],
            }),
        ],
    },
];

我需要更改 .babelrc 中的某些内容吗?目前如下:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "esmodules": true
                }
            }
        ],
        ["@babel/preset-flow"]
    ]
}

图书馆是here

嗯,我认为问题在于即使在 ESM 案例中也应用了 .babelrc。所以答案是:

  1. 删除 .babelrc 文件
  2. 将其配置移动到 rollup.config.js
  3. 配置 rollup-esm.config.js 以显式处理 class 语法。

Rollup.config.js:

...
        plugins: [
            flow(),
            commonjs(),
            nodeResolve(),
            babel({
                babelHelpers: 'bundled',
                presets: [
                    [
                        '@babel/preset-env',
                        {
                            targets: {
                                esmodules: true,
                            },
                        },
                    ],
                    ['@babel/preset-flow'],
                ],
            }),
        ],

汇总-esm.config.js:

import babel from '@rollup/plugin-babel';
export default [
    {
        input: 'src/index.js',
        output: [
            {
                file: 'dist/index.esm.js',
                format: 'esm', // ES2015 modules version so consumers can tree-shake
            },
        ],
        plugins: [
            babel({
                plugins: ['@babel/plugin-proposal-class-properties'],
                presets: ['@babel/preset-flow'],
            }),
        ],
    },
];