标签: babel-polyfill

我刚刚开始使用Babel将我的ES6 javascript代码编译成ES5.当我开始使用Promises时,看起来它不起作用.Babel网站表示支持通过polyfill承诺.

没有运气,我试图添加:

require("babel/polyfill");

要么

import * as p from "babel/polyfill";

有了这个我将在我的应用程序引导上得到以下错误:

找不到模块'babel/polyfill'

我搜索了模块,但似乎我在这里缺少一些基本的东西.我也尝试添加旧的和好的蓝鸟NPM,但看起来它不起作用.

如何使用Babel的polyfills？

我建立的WebPack我的阵营项目之间糊涂了babel,babel-core,babel-loader,babel-preset-2015和babel-preset-react.我知道Babel需要将ES7或ES6代码转换为ES5,但在我的package.json安装中我已经安装了所有这些依赖项,除了Babel,它们也是如此devDependencies.

有人可以解释一下这些之间的差异以及为什么我的项目需要所有这些之间的区别？是不是有任何单一的依赖来替换它们？如果他们如此重要,为什么他们被包括在内 devDependencies？

如标题所示，即使我也想使用babel-polyfill允许我在代码中使用promise，但是我在IE11中遇到了未定义的错误。

我已经尝试过一段时间了，因为我已经看到几次在不同的站点上被问到，但是没有一种解决方案真正适合我（或更准确地说，我可能无法适应它们）我的代码）

我认为这些文件涉及：

.babelrc

{
    "presets": [
        "es2015",
        "react"
    ]
}

package.json：我在开发人员依赖项下拥有babel-polyfill，并试图将其置于依赖项下（都只是通过控制台手动交换并安装它），但似乎都没有用

我的script.js没有将其作为导入（但是，当我在package.json中看到该语法时，如果我尝试导入@ babel-polyfill或带正斜杠的其他组合，则找不到该模块）

最后，我的gulpfile.babel.js拥有以下任务：

gulp.task('build:js', ['lint'], () => {
    return browserify({
            entries: path.resolve(paths().source.js, 'script.js'),
            extensions: ['.jsx'],
            debug: true
        })
        .transform(babelify)
        .plugin('minifyify', {
            map: 'script.js.map.json',
            output: path.resolve(paths().public.js, 'script.js.map.json')
        })
        .bundle()
        .pipe(source('script.js'))
        .pipe(gulp.dest(path.resolve(paths().public.js)))
        .pipe(notify({
            onLast: true,
            message: 'Building JS done'
        }));
});

我做错了什么？

谢谢

当我开玩笑地运行我的测试时，我遇到了上述错误；

Error: Uncaught [TypeError: array.map(...).flat is not a function]

按照该问题的解决方案，https://github.com/kulshekhar/ts-jest/issues/828

我已经安装core-js了依赖项并将其放入jest.config.js

setupFiles: ['core-js'],

我会收到另一个错误；

Error: Uncaught [Error: Not supported]

这只会发生在玩笑中，我在我的应用程序和故事书上使用 babel 和 webpack，在flat.

我的 jest.config.js

const PATH = require('./path')

module.exports = {
  setupFilesAfterEnv: ['./rtl.setup.js'],
  moduleFileExtensions: ['js'],
  verbose: true,
  moduleNameMapper: {
    '@components(.*)$': `${PATH.source}/components/$1`
  },
  transform: {
    '^.+\\.js$': 'babel-jest'
  }
}

我需要帮助诊断和修复此错误:

"Error: only one instance of babel-polyfill is allowed"

我的package.json中有以下内容:

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0" ...

"dependencies": {
    "babel-polyfill": "^6.23.0" ...

这个和我的webpack配置中的这个输入行:

entry: ["babel-polyfill", path.resolve(APP_PATH, 'index')],
...
module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      // specify that we will be dealing with React code
      presets: ['react', 'es2015']
    }
  }
]}

由于我还需要支持IE11，因此我也需要进行移植node_modules。

这是我在node_modules上使用的babel配置：

presets: [
  ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],

我使用这些useBuiltIns选项是因为它给出了错误Symbol is not defined，需要使用polyfill。

但是，此配置在编译时中断，可能是因为它imports在代码中注入了一些内容，这是错误：

基本上，它不喜欢module.exports。那么如何useBuiltIns在供应商捆绑包中使用？

现在，我始终需要在中使用babel polyfill来解决index.html，但这并不理想。

我开始使用Webpack作为学生项目,但是我无法配置Webpack以包含React和Babel.这是我的节点包:

+-- babel-core@6.18.0
+-- babel-loader@6.2.5
+-- babel-polyfill@6.16.0
+-- babel-preset-es2015@6.18.0
+-- react@15.3.2
+-- react-dom@15.3.2
`-- webpack@1.13.2

...和m'y webpack配置文件:

module.exports = {
    entry: ['babel-polyfill', './src/index.jsx'],
    output: {
        path: './build',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

但是webpack命令显示了这个错误:

ERROR in ./src/index.jsx
Module build failed: ReferenceError: [BABEL] C:\wamp\www\tripfighter\src\index.jsx: Unknown option: C:\wamp\www\tripfighter\node_modules\react\react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error …

标题几乎解释了我所面临的问题.我正在尝试测试React具有某种状态的组件,并尝试将我的商店提供给组件以获得它所需的内容.当我使用Jest运行组件的测试时,我收到以下错误:

ReferenceError: regeneratorRuntime is not defined

我已经通过了一些读数确定,这是造成babel-polyfill或者regenerator-runtime没有被正确适用于玩笑.但是,我已经尝试安装这两个软件包并重新运行而不会改变结果.在阅读了Jest Github问题页面(删除自动包含babel-polyfill#2755)之后,我发现babel-polyfillJest自版本19以来并未自动包含.我手动安装该软件包应该已经解决了问题,但它确实不.我已经包含了一些我认为相关的文件

.babelrc:

{
  "presets": ["es2015", "react", "stage-2"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }]
        }]
      ]
    }
  }
}

jest.config:

{
    "transform": {
        "^.+\\.(js|jsx)$": "<rootDir>/node_modules/webpack-babel-jest",
        ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
        ".*": "babel-jest"
    },
    "moduleNameMapper": {
        "\\.(jpg|jpeg|css|scss|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/__mocks__/fileMock.js",
        ".*\\.(vue)$": "vue/dist/vue.js"
    },
    "testPathIgnorePatterns": ["type_parser.spec.js", 
                               "<rootDir>/__tests__/__mocks__/",
                               "__tests__/unit/core/util/type_parser.js",
                               "__tests__/GitlabLoader.test.js"
                               ]
}

package.json:

{
  "name": "my_project",
  "version": "0.2.0", …

babel-preset-env提供useBuiltIns将其应用于babel-polyfill并转换import 'babel-polyfill'为特定的,基于环境的选项import 'core-js/whatever.

如果我添加babel-polyfill了我的Webpack条目部分(参见下面的示例),或者在这种情况下useBuiltIns被忽略并被所有可能的导入替换,是否应用了此转换？

entry: {
  app: ['babel-polyfill', './src/app.js']
}

我正在使用ChildNode.remove(),我在Mozilla中描述我需​​要一个用于IE的polyfill.我正在使用配置了babel-polyfill的webpack:

 "babel-polyfill": "^6.13.0",
 "webpack": "^2.4.1",

webpack.config.babel.js:

    entry: ['babel-polyfill', join(__dirname, path, "index.web.js") ],

我的假设是,babel-polyfill会为我提供我需要的所有常见的polyfill - 但事实并非如此,我在Internet Explorer 11中有错误.我错过了另一个配置吗？

谢谢