我的@babel/preset-env配置工作正常，除了 IE11。当我在 IE11 中运行它时，我得到了这个错误：

SCRIPT438：对象不支持属性或方法“分配”

谷歌搜索错误后，我看到我需要使用babel/polyfill，但它已被弃用，建议您现在使用core-js. 对于如此广泛使用的工具，官方文档缺乏。

我关注了其他 StackOverflow 帖子并提出了这个解决方案，但仍然出现错误：

包.json：

webpack.config：

我没有babelrcorbrowserlists文件，因为我想让它尽可能简约。

为什么这不起作用，为什么我继续收到此错误：

我安装在 babel 模块下面

并且package.json有

当我使用以下.babelrc配置运行构建时

它生成非缩小的构建到dist目录中。

但我也想拥有缩小版本以及非缩小版本。我尝试添加两个预设.babelrc如下

但它不会同时生成缩小和非缩小版本。在这种情况下，只会生成缩小版本。

有没有办法让 babel在目录中创建像index.js&这样的缩小和非缩小版本。index.min.jsdist

我想转换一个服务工作者源文件，以便它可以在支持服务工作者的浏览器上工作。我不能直接使用 browserslist，因为范围不接受要支持的功能列表。Caniuse 可以告诉我哪些浏览器支持服务工作者，那么它只是手动列出范围内的浏览器的情况吗？

https://caniuse.com/#feat=serviceworkers

@babel/preset-env对于与结合useBuiltIns使用的不同配置，我得到不同的输出@babel/transform-runtime。我已阅读文档，但无法弄清楚最佳实践应该是什么。

例如，当我的目标浏览器列表包括 Edge 18 时， @babel/preset-envwithuseBuiltIns将添加一个 polyfill 。string.replace

但是当我使用它时@babel/transform-runtime，不会添加那个 polyfill。

所以，从这个问题开始：

• 我检查了caniuse.com，它显示它完全受支持 - 这意味着不需要 polyfill。

• 但是，根据 Manuel Beaudru 的博文core-js@3，babel and a look into the future

caniuse,mdn并且compat-table是很好的教育资源，但并不是真正打算用作开发人员工具的数据源：仅compat-table包含一组良好的 ES 相关数据，并且由 @babel/preset-env 使用，但它有一些限制

并进一步：

出于这个原因，我创建了这个core-js-compat包：它为不同的目标引擎提供了关于 core-js 模块的必要性的数据。使用时core-js@3，@babel/preset-env将使用该新包而不是compat-table.

所以我将我的目标浏览器传递给core-js-compat它，它会输出所有需要的 polfills。如下图所示，很多字符串方法需要填充，主要是为了支持 Edge 18。

到目前为止，一切都很好。看起来string.replace 确实需要为 Edge 18 填充。

通天塔配置

第一种方法：@babel/preset-env和useBuiltIns: 'usage'

当我使用useBuiltIns: 'usage'从以下位置引入每个文件的 polyfill 时core-js：

什么时候debug: true，Babel 说它会在我的PriceColumn.js文件中添加以下 polyfill：

一个区别是它说es.string.replace的是 target edge: 17，而不是edge: 18我们在core-js-compat上面的输出中看到的 - 可能是我已经做过的事情，但现在没问题。

Babel 在转译PriceColumn.js文件顶部添加的内容：

再说一次，到目前为止一切都很好。

第二种方法：@babel/runtime和@babel/transform-runtime

根据core-js文档：

@babel/runtimewithcorejs: 3选项简化了使用 core-js-pure. core-js 它自动将 JS 标准库中现代特性的使用替换为从没有全局命名空间污染的版本中导入

听起来不错——让我们试试吧！

注释掉useBuiltIns并添加@babel/transform-runtime插件配置：

在控制台输出中，我看到：

检查添加到文件顶部的内容：

因此，helpers添加了不同的 - 但没有es.string.*polyfills 的迹象。他们不再需要了吗？他们是不是已经被“帮手”带进来了？它看起来不像对象扩展和数组映射与填充字符串实例方法有任何关系，所以我认为没有。

最后

我最后一次尝试是结合这两种方法 - 并遵循建议：

a) 设置corejs为@babel/preset-env：

这是输出：

b) 设置corejs为@babel/transform-runtime：

• 与第二种方法相同（见上文）

比较不同方法的输出

仅使用useBuiltIns：

• 引入所需的字符串 polyfill，但会污染全局命名空间。

仅使用@babel/runtime-transform：

• 不引入任何字符串 polyfills，但引入了其他助手/polyfills ??，用于数组映射和对象传播

结合使用useBuiltIns和@babel/transform-runtime：

• 引入所需的字符串 polyfill，但会污染全局命名空间。
• 还引入了 Object spread polyfill（但不是 Array map polyfill）
• 从@babel/runtime/helpers/objectSpread2，而不是@babel/runtime-corejs3/helpers/objectSpread2（运行时与运行时-corejs3）导入 - 可能是未引入 Array map polyfill 的原因？？）

问题

哪一个（如果有的话）是正确的方法？

我猜@babel/preset-envwithuseBuiltIns是最好的，因为它引入了 polyfills。

污染全局命名空间有什么缺点？这只是图书馆的问题吗？

结合@babel/transform-runtime，我们还获得了一个用于对象传播的 polyfill（尽管@babel-preset-env有corejs: { version: '3.6', proposals: true }which should polyfill 提议，所以我不确定为什么不使用@babel/transform-runtime插件就不能将它引入那里）

我们需要 Array#map polyfill 吗？

1. 我一直在学习webpack和babel...

2. 一切正常，但我的webpack配置无法正常工作，我想我在这里错过了一些东西。

这是我的webpack.config.js代码

这是所有开发依赖项

我有一个模板应用程序，我想使用 ie11，因为我正在使用 webpack + babel。由于某种原因我忽略了，我的 JS 在 ie11 中根本不起作用，即使我确实将它设置为我的配置中的目标。为了测试它，我在互联网上使用了 ie11，但由于我在 MacOS 上，我无法访问堆栈错误。

我在这里想念什么？

更多信息的源代码：https ://github.com/VelynnXV/Front-End-Workflow

网站：https ://nifty-noether-cafbd5.netlify.app/

应用程序.js

webpack.config.json

babel.config.js

包.json

我正在开发一个使用 create-react-app 创建的应用程序

但后来我需要使用mediainfojs库，这个库需要 wasm 文件，根据我的理解，我无法使用 create-react-app 添加它，我不得不将其弹出。

弹出后，我去mediainfo 信息中了解如何在webpack 上添加wasm

他们使用CopyPlugin，但是当我尝试这样做时，它抱怨我的 webpack (4) 和 CopyPlugin 的版本......所以，我决定迁移到 webpack 5

那是痛苦开始的时候......在遵循他们的迁移教程并对我的我进行了一堆修改之后，我webpack.config在运行时遇到了以下错误yarn build：

未找到模块：错误：您尝试导入项目 src/ 目录之外的 /MyWorkspace/project/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator。不支持 src/ 之外的相对导入。

唯一调用它的地方babel-preset-react-app是在配置中

这里：

和这里：

我已经查看了此处报告的类似问题，但其中大多数似乎与动态导入的静态文件或在项目目录后引用“..”目录的导入有关

完整的 webpack 配置文件在这里

我可能错过了一些非常愚蠢的东西，如果有人能指出我会很高兴。

我刚刚阅读了一篇文章，它提供了package.json 的@babel/polyfill链接，这是它的依赖项：

并从它的当前文档中@babel/polyfill指出：

从 Babel 7.4.0 开始，该包已被弃用，取而代之的是直接包含 core-js/stable（用于填充 ECMAScript 功能）和 regenerator-runtime/runtime（需要使用转译的生成器函数）：

所以似乎什么都没有改变？他们只是告诉我们单独导入它们。

关于为什么新版本不会污染全局范围，我只有一些模糊的想法：

1. 的2.x版本core-js会污染全局范围，而最新版本3.x不会。

2. 的文档@babel/plugin-transform-runtime说：

   注意：诸如 "foobar".includes("foo") 之类的实例方法仅适用于 core-js@3。如果需要 polyfill，可以直接导入 "core-js" 或使用 @babel/preset-env 的 useBuiltIns 选项。

   和：

   这个转换器的另一个目的是为您的代码创建一个沙盒环境。如果直接导入 core-js 或 @babel/polyfill以及它提供的 Promise、Set 和 Map 等内置函数，会污染全局作用域。虽然这对于应用程序或命令行工具来说可能没问题，但如果您的代码是一个您打算发布以供其他人使用的库，或者您无法完全控制代码运行的环境，那么它就会成为一个问题。

   因此regenerator-runtime，他们使用 this ，而不是可能污染全局范围，@babel/plugin-transform-runtime其依赖项是：

   这些依赖项不会污染全局范围吗？

谁能解释一下如何理解从旧巴别塔到新巴别塔的过渡？

我有一个作为库创建的 React 组件。我已经使用 webpack 和 babeljs 为它运行了构建。在babel.config.js这个组件库的 Babel 中，我有以下内容来填充旧浏览器中可能不存在的函数：

但是，当我将此组件库导入我的主 React 应用程序时，浏览器会抱怨一些 JS 函数在运行时“不是函数”。

最后我必须做的是在我的主要 React 应用程序中进行相同的设置，babel.config.js以使其正常工作，我无法理解。

自从我拥有那些 babel 配置后，组件库在从自己的存储库构建时是否已经被填充？

为什么当我将它导入到我的主 React 应用程序中时，它在主 React 应用程序中没有那些 babel 配置时不起作用？为什么我必须在我的主 React 应用程序中再次使用相同的设置才能再次填充以使其工作？

我们有一个在Recogito Annotorius上运行的应用程序。使用 Angular 11 应用程序。

现在我们正在尝试添加SelectorPack，同一作者提供的插件。当我们尝试导入此插件时，我们会收到以下错误

参考与作者的讨论，

您可能没有使用正确的 babel 预设。

所以我们需要用 angular-cli 管理 babel 预设。我们试图关注来自媒体的文章，但这不是关于 angular cli

我们还尝试使用本文更新 tsconfig.json ，但没有成功

任何如何使用 babel 配置 angular cli 的指导都会有所帮助。

我们的准则