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

Question

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

UMD、ES5（有效）
UMD、ES5、缩小版（有效）
ES模块（问题）

具体来说，我希望 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。

Answer 1

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

删除 .babelrc 文件
将其配置移动到 rollup.config.js
配置 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'],
            }),
        ],
    },
];

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

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

javascript

babeljs

flowtype

es6-modules

rollup