问题标签 [babel-preset-env]

我在 IE 上遇到错误SCRIPT1006: Expected ')'（chrome 很好）并重新排序了修复错误的 babel 预设。

你知道向后加载的 babel 预设。我想知道预设排序如何影响结果以及什么是最佳实践预设排序。

问题

固定的

我已经创建了环境变量（用户和系统）BROWSERSLIST_CONFIG并将其设置为C:\Program Files (x86)\Microsoft VS Code\bin\package.json.

但是，当我运行 webpack 并将 debug 设置为 true 时，我得到了空目标：

即使我的 package.json 具有以下内容：

如果我将目标/浏览器选项直接添加到 webpack.config 中，它工作正常，但我有多个项目，我想共享一个中央 package.config。

我如何称呼 babel-loader 有什么遗漏吗？

我正在使用 Gatsby ( doc )支持的 browserlist 来试验 Gatsby 和 polyfills 。

使用默认的浏览器列表配置，我得到了为 IE11 创建 polyfills 和工作警报的预期结果。请参阅我的github 存储库示例。该网站目前在 Netlify 上可用。

所以，我可以在生产代码中看到箭头函数和 array.prototype.find 函数是如何填充的。到目前为止没有什么奇怪的。

现在，如果我将浏览器列表更改为last 2 Chrome versions并构建生产，我希望数组 find() 方法的 polyfill 会消失，因为它受 chrome 支持。但是，我相信我仍然可以在以下位置找到相同的 polyfills（来自 core-js）app-2934fab61c547573181d.js：

所以我的问题是：为什么这些 polyfills 仍然可用，即使我使用显然不需要的浏览器列表查询？

我正在使用 webpack 和 babel 将我的 ES6 javascript 和 React 项目转换为 bundle.js。

我收到此错误：

为什么“async”关键字仍在最终转译的 bundle.js 中？

这是我的 babel.config.js：

在我的根 index.jsx 文件中，我有这两个导入：

有问题的实际代码如下：

...这被转译为：

是否需要一些其他配置来转换这些 async/await 关键字？

我正在尝试配置 babel preset-env 以针对指定的目标浏览器列表自动注入 polyfill。

文档指出，preset-env使用 形式的属性配置预设"useBuiltIns": "usage"将完全做到这一点。

（我注意到单独指定此属性会导致控制台中显示警告，但说明我应该指定要使用的 core-js 版本，所以我也添加了这个。）

因此，我babel.config.js看起来像这样：

极好的！这应该是轻而易举的事！

但是，使用 webpack 重新编译后，我的应用程序现在在浏览器中死机，并显示以下控制台消息：

我已经做了一些研究（大约只值 3 小时！），我知道这是 babel 试图转换 babel 或类似的东西的结果......我需要将一些文件添加到忽略列表中可能不会被转译或双重转译。

在我的 webpack 配置中，我放置了以下内容。（注意排除条目）。

我还尝试在忽略模式上添加一些变体，但我仍然遇到致命的控制台错误。

我尝试过的另一件事是忽略node_modules文件夹，但是我有大块的代码根本没有被转译。即在 IE11 中，我收到有关 ES6 箭头函数的语法错误，这些箭头函数源自未转译的供应商脚本。

如果有人能够解释为什么__webpack_require__会以一种不受欢迎的方式被改变，我会非常感激，因为这个问题需要的确切解决方案是对研究有很大的抵抗力。

编辑：以下建议必须使babelcore-js忽略，这似乎很合理。它建议在 babel 配置文件中使用以下内容：

但是，这会导致出现另一个相当、看似非特定的错误：

我正在尝试使用@babel/preset-typescript 和@babel/env 的组合将TypeScript 类库编译为ES5。没有任何插件，会导致编译错误：

在这里我被困住了。在官方文档中，没有提到推荐的类属性转换插件。我尝试使用@babel/plugin-proposal-class-properties，因为它被推荐用于 JS，但它似乎与 TypeScript 不兼容。例如，当我编译以下一对类时：

它生成以下 JS 代码：

这导致 B.value 未定义而不是 1。

我无法将我的 TypeScript 直接编译为 JS，因为我使用 ES6 API，而 TypeScript 编译器拒绝为我编译它的用法。

我希望库用户附加一个合适的 polyfill 以确保所有这些 API 的可用性，但我不知道如何向 TypeScript 编译器解释这一点。

我的.babelrc：

编译命令：

使用 Babel 将 TypeScript 类编译为 ES5 的正确方法是什么？

我已使用以下命令将预设 react 和 env 添加到我的 react 项目中：

yarn 全局添加 babel-preset-react@6.24.1 babel-preset-env@1.5.2

甚至我的 node_modules 文件夹也更新了预设。

文件夹结构如下所示：

indecesion-app（应用程序的文件夹名称）

• 节点模块
• 上市
• 源代码
• 包.json

• 纱线锁

  现在当我运行命令时

indecesion-app> babel src/app.js --out-file=public/scripts/app.js --presets=env,react

它显示错误：

请提出解决方案

我有一个相当简单的 Babel 配置：

这是babel-loader在我的 Webpack 设置中传递的。然后我在构建时收到如下错误：

这是版本：

任何想法为什么会发生这种情况？不preset-env应该处理类字段之类的基本事情吗？

您可以直接跳到本节的最后一部分以了解确切的问题吗？如需完整上下文，请从头开始阅读。

这就是我启动 Vue 项目的方式：

选择所有默认值，并babel.config.js在根目录中得到包含以下内容的文件：

接下来，我在根目录中安装@babel/cli、使用@babel/preset-env并创建了一个演示，内容如下：expressnpmserver.js

现在我希望server.js使用带有预设的 babel 进行编译：preset-env我尝试了以下操作：

.babelrc1）在根目录下创建一个，内容如下：

2）尝试在命令行中设置预设npx babel --preset @babel/preset-env server.js -d dist

在这两种情况下，babel.config.js似乎都优先考虑。如果确实是这样，那么我怎么能告诉 babel 在某些情况下忽略这个文件。有出路吗？

我的问题的一种解决方案是复制 to 的内容babel.config.js然后.babelrc删除babel.config.js，这样我的 VUE 构建不受影响（我真的不知道幕后发生了什么），然后我可以server.js通过忽略.babelrc使用此命令来构建

现在我想知道这里到底发生了什么，有没有更好的解决方案来解决我的问题？

Q1：有什么方法可以忽略babel.config.js使用命令行，就像我们可以忽略.babelrc一样--no-babelrc？

Q2：有什么办法可以在同一个项目下使用多个 babel config 文件？这样在使用 babel 编译时，我们可以提及使用哪个配置文件？

Q3：babel.config.js和.babelrc本质上是一样的吗？如上所述，我复制了babel.config.jsto的内容，.babelrc然后删除了babel.config.js。但是所有的 VUE 版本都运行良好。那未来安全吗？

尝试谷歌搜索，但可以找到任何有用的东西。提前致谢。

我正在尝试使用 Grunt 任务运行器将我的 ES6+ 代码编译为 vanilla js。我故意选择 Grunt 而不是 webpack 和 gulp，因为我只是想缩小我的 js 文件。

在运行代码后，我已成功将我的 ES6 代码编译为 vanilla，但出现错误，提示未定义 generatorRuntime。在分析了这个问题后，我可以认为我的 async 和 await 代码在转换为 vanilla js 后会出现问题。

我有我的 gruntfile.js 和 package.json 的代码片段。

包.json