标签: babel-polyfill

我得的WebPack与巴贝尔工作,包括@通天塔/填充工具,还试图使用时IE11仍是投掷SCRIPT438错误.forEach上NodeList.

这是我的 package.json

{
  ...
  "scripts": {
    "build:js": "webpack --config ./_build/webpack.config.js"
  },
  ...
  "browserslist": [
    "IE 11",
    "last 3 versions",
    "not IE < 11"
  ],
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0"
  }
}

我的webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => {

  const javascript …

是否有任何类型的babel-polyfill支持的功能列表？我们刚刚开始使用babel,我想知道我们目前依赖的某些依赖项是否可以像es6-promises&那样被消除whatwg-fetch.如果babel-polyfill支持的承诺当然没有必要包括在内es6-promises.

阅读文章删除Babel的舞台预设后babel,我仍然不完全了解如何从(例如)stage-3(flatMap)添加提案.babelrc.

据我所知,因为flatMap可以用ES5编写,那么我需要一个polyfill而不是插件.我@babel/polyfill在--save-dev下安装但是浏览器仍然告诉我这个方法不存在.我想这@babel/polyfill不包括实验性功能.

我对ES6 +相对较新（称为现代JavaScript），但似乎如果要在浏览器中使用它，则需要babel- minify或terser。（首先我以为Babili是另一位玩家，但这只是Babel-Minify 的旧名字）

关于用于浏览器的polyfill，可以使用生产就绪的解决方案，例如@ babel / polyfill或Polyfill.io，通过它们，可以将较小的+更快的代码发送给现代浏览器，因为它们不需要/很少需要polyfill（快速测试浏览器，加载动态所需的polyfill，然后启动我们应用的主脚本）。因此，使用这些现代技术似乎绝对合理。

这是我选择babel-minify或的困境terser。

该团队的WebPack 决定开关，以terser在即将举行的WebPack 5
的巴贝尔队取得了比较表显示terser在速度上要好得多。
文档说这terser是uglify-es以前被广泛使用的一个分支。

这些使我认为我必须选择terser。

但是另一方面，转换仍然需要Babel（并且Babel可以用于许多有用的东西）。他们在业务很久以前（虽然Babili/babel-minify是首次发布于2016年8月26日，所以uglify是老年人）。他们在GitHub上有一个很棒的开发人员社区，可能早已发现并修复了错误。基于这些，我对生产安全输出感到更加信任。但是我还没有找到任何有关babel-minifyover 的专业文章terser。

问题：

我会选择，terser因为它看起来很有希望，并且上面已经说明了原因，但是：

• 什么情况下我应该babel-minify用完terser？
• 使用Babel软件包进行所有操作是否具有任何优势？

我正在使用带有 Axios的Electron Vue应用程序来调用我的 Laravel 服务器。在 Electron 的开发模式下，一切都很完美。但是，一旦我将 Electron 应用程序构建为安装程序并将其放在客户端计算机上，所有混乱就爆发了。我解决了一些问题，但这一个问题会杀了我。

简单地说，即使所有 Axios 都成功返回，它们也会抛出一个我在 .catch() 中放入的错误。老实说，我很困惑这怎么可能。例如，当我的程序加载时，它会进行一些调用以获取所需的信息。抛出错误并显示警报。我想这只是我的 Laravel 服务器。但是数据被成功抓取并添加到应用程序中。

axios.post(`${this.$store.state.URL}/get_server_ticket_from_table?api=${this.$store.state.API}`, {
    id: this.ServerTicketMove.Server1.id,
    table: this.ServerTicketMove.currentTable
})
.then((response) => {
    console.log(response)

    if (typeof response.data.id != 'undefined') {
        this.ServerTicketMove.ticket = response.data

    }

})
.catch(() => {
    alert('Did not get Servers Table Information. Cant Connect to Main Server.')
}) 

我做了一些谷歌搜索，看到了一些关于 CORS 的帖子。所以我在我的 Web 服务器和 Laravel 上完成并启用了它。这造成了更大的混乱。同样的错误，但这次没有数据应用于任何东西。所以 .then() 甚至没有被调用。最重要的是，在启用 CORS 的情况下，我的 Axios 似乎正在使用 OPTIONS 的请求方法进行额外的 HTTP 调用。为什么？我不认为 CORS 是我问题的答案。

同样在我的 Electron Vue background.js 中，我重新开启了网络安全。这是因为发展。这没有改变任何东西。

win …

我正在观看高级Webpack视频.在大约10分钟时,他谈到检测你是否需要在运行时使用Babel-Polyfill,然后在需要时加载它.我发现这非常有趣.我和他交谈了,但推特缺少一种格式来完全回答我的问题:

if (!feature) require("./polyBundle");

他的推荐是我完全理解的.我的问题是我需要寻找哪些功能/特性？我需要包括Modernizr吗？如果我必须寻找多个功能,我必须跟踪Babel-Polyfill有时间我更新它,看看我是否需要添加/减去列表中的功能？

我尝试使webpack 树摇动删除未使用babel-polyfill.

index.js 文件包含:

import 'babel-polyfill'
const add4 = n => n + 4
const add5 = n => n + 5
add4(6)

console.log('boom', add4(4))

在这个文件中没有代码需要任何es2015 + polyfill,所以我期望树摇动删除捆绑输出中未使用的babel-polyfill.事实并非如此,捆绑包仍然包含它们(缩小).

这是一个带有此代码的git repo.

webpack配置:

const MinifyPlugin = require('babel-minify-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle-webpack.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new MinifyPlugin({ mangle: { topLevel: true } }, { comments: false }) …

我只是设置了新的webpack 4项目,并在我的主js文件中导入了babel-polyfill

import 'babel-polyfill';

在webpack生产构建之后,我用source-map-explorer我看到这样的图片来分析我的bandle

所以babel-polyfill(core-js)需要150 Kb,这是IMO太多了.

有什么想法我怎么能减小尺寸？我不想包含任何特定的polyfills(应该有一些树抖动,所以不应该删除未使用的代码？).

我使用这个样板:https://github.com/flexdinesh/react-redux-boilerplate/tree/master/config

我正在学习 Udemy 的教程，我们刚刚下载了 babel。一切正常，直到我下载了 babel-polyfill 并尝试集成它。

目前这是我的 webpack 和 babelrc 文件： Webpack & Babel ，这是命令行上的错误： Command Line Error。

有谁知道我做错了什么？在此先感谢您的帮助！

使用 babel 定位 Node v4，生成的代码似乎依赖于regeneratorRuntime未包含在输出中的模块。

据我所知，在执行生成的代码之前，似乎必须在运行时需要“regenerator-runtime/runtime”模块。（通过https://babeljs.io/docs/en/usage#polyfill）

生成器脚本：

const babel = require('@babel/core');
const out = babel.transformSync(`
  (async () => {

  })();
`, {
  presets: [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4"
        }
      }
    ]
  ]
});

输出：

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } …