在 Rollup 中,创建 ESM 模块,除 Flow 外不使用 babel 转译
In Rollup, create ESM module with no babel transpiling except Flow
我正在尝试使用 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。
嗯,我认为问题在于即使在 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 和 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。
嗯,我认为问题在于即使在 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'],
}),
],
},
];