![](/img/trans.png)
[英]confused with babel preset configs between @babel/env and @babel/preset-env
[英]Rollup + @babel/preset-env + @babel/polyfill
使用匯總時,如何使其與@babel/preset-env
和@babel/polyfill
? 提到要添加useBuiltIns: 'usage'
的文檔,但是在執行此操作時,控制台中出現require is not defined
。 以下是我到目前為止的內容; 還有更推薦的設置嗎?
rollup.config.js:
import babel from 'rollup-plugin-babel'; import resolve from 'rollup-plugin-node-resolve'; import { terser } from 'rollup-plugin-terser'; const dist = './dist/'; const name = 'focusoverlay'; export default { input: './src/index.js', output: [ { file: `${dist}${name}.cjs.js`, format: 'cjs' }, { file: `${dist}${name}.esm.js`, format: 'esm' }, { name: 'FocusOverlay', file: `${dist}${name}.js`, format: 'umd' } ], plugins: [ resolve(), babel({ exclude: 'node_modules/**' }), terser() ] };
.babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"modules": false,
"targets": {
"browsers": "> 0.25%, not op_mini all, not dead, IE 10-11",
"node": 6
}
}
]
]
}
我通過刪除.babelrc
文件並將babel配置完全移至rollup.config.js
來rollup.config.js
。 然后,我還包括了rollup-plugin-commonjs
插件,用於將CJS模塊轉換為ES6。 我的最終配置示例:
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
const dist = './dist/';
const name = 'focusoverlay';
export default {
input: './src/index.js',
output: [
{
file: `${dist}${name}.cjs.js`,
format: 'cjs'
},
{
file: `${dist}${name}.esm.js`,
format: 'esm'
},
{
name: 'FocusOverlay',
file: `${dist}${name}.js`,
format: 'umd'
}
],
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
presets: [
[
'@babel/env',
{
modules: 'false',
targets: {
browsers: '> 1%, IE 11, not op_mini all, not dead',
node: 8
},
useBuiltIns: 'usage'
}
]
]
}),
commonjs(),
terser()
]
};
完整的配置在這里 。 當然仍然歡迎提出改進建議。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.