如果你正在构建一个应用程序，你只需要@babel/preset-env和@babel/polyfill：

npm i -D @babel/preset-env
npm i @babel/polyfill

（注意：您不需要安装core js和再生器运行时包，因为它们都将由@babel/polyfill安装）

然后在.babelrc中：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

现在设置目标环境。在这里，我们在.browserlistrc文件中执行此操作：

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

最后，如果使用useBuiltIns:“entry”，请将import@babel/polyfill放在条目文件的顶部。否则，你就完蛋了。

使用此方法将有选择地导入那些polyfills和“再生器运行时”文件（此处未定义修复再生器的运行时问题），前提是任何目标环境/浏览器都需要它们。

当我尝试使用ES6生成器时，使用gulf with rollup时会出现以下错误：

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

我可能认为解决方案是将babel polyfill作为bower组件：

bower install babel-polyfill --save

并将其作为依赖项添加到index.html中：

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

我的工作babel 7样板，用于与再生器运行时反应：

巴氏合金

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

包.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....

或者，如果您没有使用像webpack或rollup这样的bundler，那么作为解决方法，您可以只导入https://raw.githubusercontent.com/facebook/regenerator/master/packages/regenerator-runtime/runtime.js在index.html中使用普通的旧脚本标记。

不是最优的，但在我的情况下，这是唯一的解决方案。

更新：Babel 7的帖子也有更深入的答案。

---

Babel 7.4.0或更高版本（核心js 2/3）

从Babel 7.4.0开始，@Babel/polyfill已弃用。

通常，有两种方法安装polyfills/reduator：通过全局命名空间（选项1）或作为ponyfill（选项2，无全局污染）。

---

选项1:@babel/preset-env

presets: [
  ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "corejs": 3, // or 2,
    "targets": {
        "firefox": "64", // or whatever target to choose .    
    },
  }]
]

将根据您的目标自动使用再生器运行时和核心js。无需手动导入任何内容。不要忘记安装运行时依赖项：

npm i --save regenerator-runtime core-js

或者，设置useBuiltIns:“entry”并手动导入：

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

---

选项2:@babel/transform runtime和@babel/runtime

这种替代方案没有全球范围的污染，适用于图书馆。

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        "corejs": 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

Install it:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

如果使用了corejs polyfill，则将@babel/runtime替换为@babel/runtime-corejs2（对于“corejs”：2）或@babel/runtime-corejs3（对于“corejs”：3）。

供将来参考：

从Babel版本7.0.0-beta.55起，已删除舞台预设

参考博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

异步等待仍然可以由

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

安装

npm install --save-dev @babel/plugin-transform-async-to-generator

babelrc中的用法

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

并使用babel polyfillhttps://babeljs.io/docs/en/babel-polyfill

安装

npm install --save @babel/polyfill

webpack.config.js

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};