标签: babel-polyfill

精简版

当我在IE11中运行我的应用程序时,我Promise is undefined在manifest.js文件中收到错误说明.

如何在执行清单之前添加babel-polyfill或类似运行？

长版

我正在尝试将CommonsChunkPlugin添加到我的webpack配置中,以便将第三方(npm包)脚本拆分为单独的包.根据Webpack 2文档,我已经设置了" 组合隐式公共供应商块和清单文件 ",这在现代浏览器中运行良好.

我编写了一个函数来确保块以正确的顺序包含在我的索引文件中(见下文).

关于我的两个明确的切入点的一些背景知识:

• legacy_libs - 放置在全局命名空间中的旧库script-loader.我希望随着时间的推移逐步淘汰这些
• main - 我的主要app入口点

另外两个(供应商和清单)是隐式的,并使用CommonsChunkPlugin创建.

当我用IE11运行时,我收到一个错误:Promise is undefined.这似乎是因为webpack表明自己正在调用new Promise().

在我的主要切入点我有import 'babel-polyfill';.在我添加供应商和清单分块之前,这使我能够克服IE缺乏Promise的问题.但是现在我首先加载了manifest.js,我无法弄清楚如何以正确的顺序包含它.

我的配置如下:

module.exports = {
  entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js'
  },
  ...
  plugins: [
    // Extract third party libraries into a separate vendor bundle.
    // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when …

什么时候process.env.NODE_ENV=='development'- 没关系!

但我们的生产版本在IE 11(11.0.9600)中失败了.铬55都可以正常工作.

devDependencies:

...
babel-core: "6.22.0",
babel-eslint: "^7.0.0",
babel-loader: "^6.2.5",
babel-preset-env: "^1.5.2",
babel-preset-es2015: "^6.16.0",
babel-preset-es2016: "^6.22.0",
babel-preset-es2017: "^6.16.0",
babel-preset-react: "^6.16.0",
babel-preset-stage-0: "^6.22.0"
...

依赖关系:

...
babel-polyfill: "^6.16.0"
...

.babelrc:

{
    "presets": [
        "react",
        ["env", {
             "useBuiltIns": true
        }],
        "stage-0"
    ]
}

尝试"useBuiltIns": false,es2016,es2015,es2017预设.没有什么变化.

index.js:

"use strict";
import 'babel-polyfill'
...

webpack.config module.exports.entry:

vendor: ['babel-polyfill', 'immutable', 'react', 'react-dom', ...],
...
bundle: [path.resolve(__dirname, srcPath + ""index.js)]

vendor是index.html中的第一个脚本.

在控制台中键入_babelPolyfill返回true.但是Headers,fetch是未定义的......

为什么process.env.NODE_ENV=='production'在IE11中破坏我的应用程序？如何修复我的配置？

我在Babel选项/配置中有点迷失.我想使用最近的js功能并编译(使用webpack)浏览器代码.

babel-polyfill和babel插件有babel-preset-env什么区别？

他们打算一起工作吗？

我执行时遇到此错误webpack：

Module not found: Error: Can't resolve 'core-js/modules/es6.array.map' in '/path/to/project/src'
 @ ./src/index.ts 1:0-39

index.ts：

console.log([1, 2, 3].map(x => x * x));

.babelrc：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

webpack.config.js：

const path = require('path');

module.exports = {
  mode: 'development',

  entry: './src/index.ts',
  devtool: false,
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'ts-loader' }
        ]
      } …

Uncaught RangeError: Maximum call stack size exceeded由于以下原因，我收到了错误消息：

npm.babel.e5824bbfde6f57781e4f.chunk.js:1 @babel/polyfill is loaded more than once on this page. This is probably not desirable/intended and may have consequences if different versions of the polyfills are applied sequentially. If you do need to load the polyfill more than once, use @babel/polyfill/noConflict instead to bypass the warning.

仅当我使用npm run buildcommand 构建生产环境并使用http-server或提供这些文件时，才会发生这种情况serve。

我已经将React-Boilerplate与antd Theme集成在一起，并且我必须在webpack中更改配置，尽管它在开发模式下可以按预期工作，但是在为生产构建时会抛出错误。

我babel-polyfill在我的React应用程序中使用它来转换ECMAScript为 vanilla JS。据我了解babel-polyfill现在已弃用。

我在我的应用程序中收到的警告React是：

@babel/polyfill 已弃用。请分别使用 core-js 和 regenerator-runtime/runtime 所需的部分

目前我的package.json文件中有以下内容：

"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "redux-devtools": "^3.5.0"
  }

可以安全地假设我现在需要以下内容而不是babel-polyfill？

"devDependencies": {
    "core-js": "3.6.5",
    "regenerator-runtime": "0.13.5"
  },

import 'babel-polyfill';另外，我认为，我认为我需要以下内容，而不是在我的减速器和组件中：

import "core-js/stable";
import "regenerator-runtime/runtime";

这些是要经过的步骤吗？我错过了什么吗？

我的理解是Babel Polyfill模拟完整的ES6环境,而babel-preset-env根据您需要支持的环境(浏览器)自动将ES6(及更高版本)编译为ES5.

我有几个问题:

• 这两个设计是为了彼此并排使用,还是相互替代？

• 如果它们被设计成彼此的替代品,是否有理由选择一个而不是另一个？还有一个表现更好吗？

• 当使用这些工具中的任何一个时,是否仍然需要使用额外的Babel插件,或者其中一个包含我需要编写符合规范的现代JavaScript的每个插件(仅限第4阶段提案,我认为需要插件才能使用第3阶段及以下？).

您好，我刚开始使用 Babel 来转换和填充我的代码，以适用于 Edge 和 IE 等旧版浏览器。我目前在为 Promises 填充代码时遇到问题。我检查 Edge，收到的错误是：

创建的钩子出错：“TypeError：对象不支持属性或方法‘最后’

所以问题出在我的 Vue 应用程序中的 finally 方法上。在我的应用程序中，我使用 Axios 从 API 获取数据。

所以我在 CLI 说明下完成了这里的步骤： https: //babeljs.io/setup.html#installation 。我的package.json文件目前看起来像这样：

{
    "name": "job-filtering",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "babel src -d lib"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/cli": "^7.2.3",
      "@babel/core": "^7.2.2",
      "@babel/plugin-transform-regenerator": "^7.0.0",
      "@babel/preset-env": "^7.2.3"
    },
    "dependencies": {
      "@babel/polyfill": "^7.2.5"
    }
}

我的.babelrc文件如下所示：

{ …

当使用 babel 和 webpack 将我们的 TS 项目捆绑到 es5 中时，我们看到了标准字符串方法的填充，例如

String.replace, String.match,String.split

$ Added following core-js polyfill:
  es.array.join { "ie":"11" }

$ Added following core-js polyfills:
  es.string.replace { "edge":"17", "firefox":"67", "ie":"11", "ios":"12", "safari":"12.1", "samsung":"9.2" }
  es.string.split { "edge":"17", "ie":"11" }

根据 MDN 和其他可信兼容性表的兼容性图表，所有这些平台都完全支持这些方法。但为什么 babel 会为它们添加 polyfills 对我们来说仍然是一个问题。

有没有办法通过 babel 配置禁用这些标准方法的 polyfill？下面是我们的 babel 配置，如果我们遗漏了什么，请提示我们。

const presets = [
  [
    '@babel/env', // Using babel preset-env
    {
      debug: true, // Disabling debug output in console
      targets: {
        browsers: ['> 1%', 'not …

我有一个React使用创建的应用程序npx create-react-app my-app。我一直在定期更新这两个软件包React和其他npm软件包。

不久前，我开始收到以下警告：

@babel/polyfill 已弃用。请分别使用 core-js 和 regenerator-runtime/runtime 所需的部分

以下是我的package.json文件中的内容：

"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "redux-devtools": "^3.5.0"
  }

我在网上找到了一些关于如何处理此问题的文章，但没有一篇看起来像官方解决方案。处理这个问题的正确方法是什么？

到目前为止，这是一个警告而不是错误，所以我只是推迟处理它。今天，我升级了moment软件包，然后开始出现错误，我认为首先处理这个问题是一个很好的起点。

我希望得到一些指示来消除此警告。