babel 使用 @babel/preset-env 預設 編譯后的代碼在 node 環境中運行提示 "regeneratorRuntime is not defined",這個錯誤是 bable 對 async/await 轉換時產生的。
在 babel 的 @babel/preset-env 有這樣一句話
Since one of the original goals of preset-env was to help users easily transition from using preset-latest,
it behaves similarly when no targets are specified: preset-env will transform all ES2015-ES2020 code to be ES5 compatible.
如果我們沒有指定目標運行環境的話，會將我們所有的代碼都轉換成 ES5, 所有我們代碼中如果使用了 async/await 就會進行ES5轉換，經 google 之后，
發現 babel 轉換 async/await 主要時通過 @babel/plugin-transform-async-to-generator
插件來實現的。打開這個插件介紹可以看到：
NOTE: This plugin is included in @babel/preset-env In Babel 7, transform-async-to-module-method was merged into this plugin
這個插件在 Babel 7 中已經內置到了 @babel/preset-env, 那么我們是不是可以告訴 @babel/preset-env 不要使用 @babel/plugin-transform-async-to-generator 插件幫
我們編譯就好了。
解決方法一
修改 babel 的配置 .babelrc.json 為:
{
"presets": [
[
"@babel/preset-env",
{
"exclude": ["@babel/plugin-transform-regenerator"]
}
]
],
"plugins": []
}
這樣配置后重新打包就會發現不會有 'regeneratorRuntime is not defined' 的錯誤了。
這可以解決，但是我去看 @babel/preset-env 的文檔可以發現 Options 有 targets
可以指定 目標環境 那么我就可以把 targets 指定為高一些即可。
解決方法二
指定代碼的運行環境，修個 .babelrc.json 為:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "80",
"node": "14"
}
}
]
]
}
我這里把 chrome 環境指定到了 80 以上，node 環境指定到了 14 以上，
這樣根據自己的項目實際情況來指定，進而解決了這個問題。
建議使用方法二來解決這個問題。