ฉันกำลังพยายามใช้ async รอตั้งแต่เริ่มต้นที่ Babel 6 แต่ฉันไม่ได้กำหนด regeneratorRuntime

.babelrc ไฟล์

{
    "presets": [ "es2015", "stage-0" ]
}

ไฟล์ package.json

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

ไฟล์. js

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

ใช้งานได้ตามปกติโดยไม่ต้องใช้ async / await ทำงานได้ดี ความคิดใดที่ฉันทำผิด

babel-polyfill( คัดค้าน Babel 7.4) คุณต้องติดตั้งเพื่อรับ async / รอการทำงาน

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

.js พร้อม async / await (โค้ดตัวอย่าง)

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

ในไฟล์เริ่มต้น

require("babel-core/register");
require("babel-polyfill");

หากคุณกำลังใช้webpackคุณต้องใส่มันเป็นค่าแรกของentryอาร์เรย์ในไฟล์กำหนดค่าwebpack.config.jswebpack ของคุณ (โดยปกติ) ตามความคิดเห็น @Cemen:

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

หากคุณต้องการรันการทดสอบด้วย babel ให้ใช้:

mocha --compilers js:babel-core/register --require babel-polyfill

นอกจาก polyfill ผมใช้Babel-ปลั๊กอินเปลี่ยนรันไทม์ ปลั๊กอินอธิบายว่า:

ทำการอ้างอิงภายนอกไปยังผู้ช่วยเหลือและบิลด์ภายในโดยอัตโนมัติเติมรหัสของคุณโดยไม่ทำให้เกิดมลภาวะ จริง ๆ แล้วสิ่งนี้หมายความว่าอย่างไร โดยทั่วไปคุณสามารถใช้บิวด์อินเช่น Promise, Set, Symbol เป็นต้นรวมถึงฟีเจอร์ทั้งหมดของ Babel ที่ต้องการโพลีฟิลอย่างราบรื่นโดยไม่มีมลภาวะระดับโลกทำให้เหมาะอย่างยิ่งสำหรับห้องสมุด

นอกจากนี้ยังมีการรองรับ async / คอยพร้อมกับบิวด์อินอื่น ๆ ของ ES 6

$ npm install --save-dev babel-plugin-transform-runtime

ใน.babelrcเพิ่มปลั๊กอินรันไทม์

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

หมายเหตุ: หากคุณกำลังใช้ Babel 7 แพคเกจได้รับการเปลี่ยนชื่อ@ Babel / ปลั๊กอินเปลี่ยนรันไทม์

ผู้ใช้ Babel 7 คน

ฉันมีปัญหาในการแก้ไขเนื่องจากข้อมูลส่วนใหญ่เป็นรุ่นบาเบลก่อน สำหรับ Babel 7 ให้ติดตั้งการขึ้นต่อกันทั้งสองนี้:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

และใน .abelabel ให้เพิ่ม:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

ปรับปรุง

ใช้งานได้หากคุณตั้งเป้าหมายเป็น Chrome แต่มันอาจไม่ทำงานสำหรับเป้าหมายอื่น ๆ โปรดดูที่: https://github.com/babel/babel-preset-env/issues/112

ดังนั้นคำตอบนี้ไม่เหมาะสมสำหรับคำถามต้นฉบับ babel-preset-envฉันจะให้ที่นี่เป็นข้อมูลอ้างอิงเพื่อ

ทางออกที่ง่ายคือการเพิ่มimport 'babel-polyfill'ที่จุดเริ่มต้นของรหัสของคุณ

หากคุณใช้ webpack ทางออกที่รวดเร็วคือการเพิ่มbabel-polyfillดังที่แสดงด้านล่าง:

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

ฉันเชื่อว่าฉันพบวิธีปฏิบัติที่ดีที่สุดล่าสุดแล้ว

ตรวจสอบโครงการนี้: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

ใช้สิ่งต่อไปนี้ตามการตั้งค่า babel ของคุณ:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

จากนั้นแอปของคุณควรไปในเบราว์เซอร์ Chrome เวอร์ชัน 2 ล่าสุด

นอกจากนี้คุณยังสามารถตั้งค่าNodeให้เป็นเป้าหมายหรือปรับแต่งรายการเบราว์เซอร์ตามhttps://github.com/ai/browserslist

บอกฉันทีว่าอย่าบอกฉันสิ

ฉันชอบbabel-preset-envปรัชญาของ: บอกฉันว่าคุณต้องการสนับสนุนสภาพแวดล้อมแบบใดอย่าบอกวิธีการสนับสนุนพวกเขา มันเป็นความงามของการเขียนโปรแกรมที่เปิดเผย

ฉันได้ทดสอบasync awaitแล้วและพวกมันทำงานได้ดี ฉันไม่รู้ว่ามันทำงานอย่างไรและฉันก็ไม่อยากรู้ ฉันต้องการใช้เวลากับโค้ดของตัวเองและใช้ตรรกะทางธุรกิจแทน ขอบคุณbabel-preset-envมันปลดปล่อยฉันจากนรกการตั้งค่าบาเบล

อีกทางเลือกหนึ่งหากคุณไม่ต้องการโมดูลทั้งหมดที่babel-polyfillมีให้คุณสามารถระบุbabel-regenerator-runtimeในการกำหนดค่าwebpack ของคุณ:

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

เมื่อใช้ webpack-dev-server กับ HMR การทำเช่นนี้จะช่วยลดจำนวนไฟล์ที่จะรวบรวมในทุกบิลด์ได้มาก โมดูลนี้ได้รับการติดตั้งเป็นส่วนหนึ่งbabel-polyfillดังนั้นหากคุณมีโมดูลที่ใช้ได้อยู่แล้วมิฉะนั้นคุณสามารถติดตั้งโมดูลแยกต่างหากnpm i -D babel-regenerator-runtimeได้

ทางออกที่เรียบง่ายของฉัน:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

Babel 7.4.0 หรือใหม่กว่า (core-js 2/3)

ในฐานะของบาเบล 7.4.0 , @babel/polyfill จะ เลิก

โดยทั่วไปมีสองวิธีในการติดตั้ง polyfills / regenerator: ผ่าน namespace ทั่วโลก (ตัวเลือก 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 .    
    },
  }]
]

จะใช้โดยอัตโนมัติregenerator-runtimeและการcore-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
        ...
      }
    ]
  ]
}

ติดตั้ง:

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

ถ้าคุณใช้แกน js polyfills คุณติดตั้ง@babel/runtime-corejs2หรือ@babel/runtime-corejs3แทนโปรดดูที่นี่

ไชโย

babel-regenerator-runtimeคือตอนนี้เลิกใช้regenerator-runtimeแทนควรใช้

ในการใช้ตัวสร้างรันไทม์ด้วยwebpackและbabelv7:

ติดตั้งregenerator-runtime:

npm i -D regenerator-runtime

จากนั้นเพิ่มในการกำหนดค่า webpack:

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

อัปเดต.babelrcไฟล์ของคุณตามตัวอย่างต่อไปนี้มันจะทำงาน

ถ้าคุณใช้@babel/preset-envแพ็คเกจ

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

ระวังฟังก์ชั่นการยก

ฉันมีทั้ง 'การนำเข้า polyfill' และ 'ฟังก์ชั่น async' ของฉันในไฟล์เดียวกัน แต่ฉันใช้ไวยากรณ์ของฟังก์ชั่นที่ยกขึ้นเหนือ polyfill ซึ่งจะทำให้ฉันมีReferenceError: regeneratorRuntime is not definedข้อผิดพลาด

เปลี่ยนรหัสนี้

import "babel-polyfill"
async function myFunc(){ }

สำหรับสิ่งนี้

import "babel-polyfill"
var myFunc = async function(){}

เพื่อป้องกันไม่ให้ถูกยกขึ้นเหนือการนำเข้า polyfill

ตั้งแต่ตุลาคม 2019 สิ่งนี้ได้ผลกับฉัน:

เพิ่มลงในที่ตั้งไว้ล่วงหน้า

 "presets": [
      "@babel/preset-env"
    ]

จากนั้นติดตั้ง regenerator-runtime โดยใช้ npm

npm i regenerator-runtime

และในการใช้ไฟล์หลักของคุณ: (การนำเข้านี้ใช้เพียงครั้งเดียว)

import "regenerator-runtime/runtime";

สิ่งนี้จะช่วยให้คุณสามารถใช้async awaitsในไฟล์ของคุณและลบregenerator error

ถ้าใช้แล้วก็ต้องเริ่มต้นสคริปต์ด้วยbabel-preset-stage-2--require babel-polyfill

ในกรณีของฉันข้อผิดพลาดนี้ถูกโยนโดยMochaการทดสอบ

การติดตามแก้ไขปัญหา

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

ฉันเริ่มได้รับข้อผิดพลาดนี้หลังจากที่แปลงโครงการของฉันให้เป็นโครงการแบบอักษรตัวพิมพ์ จากสิ่งที่ฉันเข้าใจปัญหาเกิดจาก async / คอยไม่ได้รับการยอมรับ

สำหรับฉันข้อผิดพลาดได้รับการแก้ไขโดยการเพิ่มสองสิ่งในการตั้งค่าของฉัน:

1. ดังที่ได้กล่าวมาแล้วหลายครั้งฉันจำเป็นต้องเพิ่ม babel-polyfill ในอาร์เรย์รายการ webpack ของฉัน:

   ...
   
   รายการ: ['babel-polyfill', './index.js'],
   
   ...

2. ฉันต้องการอัปเดต .abelrc ของฉันเพื่ออนุญาตให้มีการร้องเรียน async / ที่รอเข้าเครื่องปั่นไฟ:

   {
     "ค่าที่ตั้งล่วงหน้า": ["es2015"],
     "ปลั๊กอิน": ["transform-async-to-generator"]
   }

DevDependencies:

ฉันต้องติดตั้งบางสิ่งลงในอุปกรณ์ของฉันในไฟล์ package.json ของฉันด้วย คือฉันพลาด babel-plugin-transform-async-to-generator, babel-polyfill และ babel-preset-es2015:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

สรุปสาระสำคัญรหัสเต็ม:

ผมได้รับรหัสจากการที่เป็นประโยชน์จริงๆและรัดกุมส่วนสำคัญ GitHub คุณสามารถหาได้ที่นี่

ฉันมีปัญหานี้ใน Chrome คล้ายกับคำตอบของRienNeVaPlu͢ซึ่งแก้ไขได้สำหรับฉัน:

npm install --save-dev regenerator-runtime

จากนั้นในรหัสของฉัน:

import 'regenerator-runtime/runtime';

ความสุขที่จะหลีกเลี่ยงการพิเศษ 200 babel-polyfillกิโลไบต์จาก

คุณได้รับข้อผิดพลาดเนื่องจาก async / รอการใช้เครื่องกำเนิดไฟฟ้าซึ่งเป็นคุณสมบัติ ES2016 ไม่ใช่ ES2015 วิธีหนึ่งในการแก้ไขปัญหานี้คือการติดตั้ง babel preset สำหรับ ES2016 ( npm install --save babel-preset-es2016) และคอมไพล์เป็น ES2016 แทน ES2015:

"presets": [
  "es2016",
  // etc...
]

ตามคำตอบอื่น ๆ ที่กล่าวถึงคุณยังสามารถใช้polyfills (แต่ต้องแน่ใจว่าคุณโหลด polyfillก่อนที่จะเรียกใช้รหัสอื่น) หรือถ้าคุณไม่ต้องการที่จะรวมทั้งหมดของการอ้างอิง polyfill คุณสามารถใช้Babel-ฟื้นฟูรันไทม์หรือBabel-ปลั๊กอินเปลี่ยนรันไทม์

ข้อผิดพลาดนี้เกิดขึ้นเมื่อasync/awaitใช้ฟังก์ชันโดยไม่มีปลั๊กอิน Babel ที่เหมาะสม เมื่อวันที่มีนาคม 2563 สิ่งที่คุณต้องทำมีดังต่อไปนี้ ( @babel/polyfillและโซลูชั่นที่ยอมรับจำนวนมากเลิกใช้แล้วใน Babel อ่านเพิ่มเติมในBabel docs )

ในบรรทัดคำสั่งพิมพ์:

npm install --save-dev @babel/plugin-transform-runtime

ในbabel.config.jsไฟล์ของคุณเพิ่มปลั๊กอิน@babel/plugin-transform-runtimeนี้ หมายเหตุ: ตัวอย่างด้านล่างนี้รวมถึงการตั้งค่าล่วงหน้าและปลั๊กอินอื่น ๆ ที่ฉันมีสำหรับโครงการ React / Node / Express ขนาดเล็กที่ฉันทำงานเมื่อเร็ว ๆ นี้:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

ฉันแก้ไขข้อผิดพลาดนี้โดยการติดตั้ง babel-polyfill

npm install babel-polyfill --save

จากนั้นฉันก็นำเข้ามาที่จุดเข้าแอพของฉัน

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

สำหรับการทดสอบฉันรวม - ต้องการ babel-polyfill ในสคริปต์ทดสอบของฉัน

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

ใหม่คำตอบทำไมคุณทำตามคำตอบของฉัน

ตอบ:เพราะฉันจะให้คำตอบกับโครงการอัปเดตเวอร์ชัน npm ล่าสุด

2017/04/14

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

หากคุณใช้เวอร์ชันนี้หรือสูงกว่าเวอร์ชัน Npm ของคุณและอื่น ๆ ... ดังนั้นเพียงแค่ต้องเปลี่ยน:

webpack.config.js

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

หลังจากเปลี่ยนwebpack.config.jsไฟล์เพียงเพิ่มบรรทัดนี้ไปที่ด้านบนสุดของรหัส

import "babel-polyfill";

ตอนนี้ตรวจสอบทุกอย่างก็โอเค ลิงค์อ้างอิง

ขอบคุณ @BrunoLM สำหรับคำตอบที่ดีของเขา

เบราว์เซอร์เป้าหมายที่ฉันต้องการสนับสนุนแล้วรองรับ async / คอย แต่เมื่อเขียนการทดสอบมอคค่าโดยไม่มีการตั้งค่าที่เหมาะสมฉันยังคงได้รับข้อผิดพลาดนี้

บทความส่วนใหญ่ฉัน googled จะล้าสมัยรวมทั้งคำตอบที่ได้รับการยอมรับและได้รับการโหวตสูงคำตอบที่นี่คือคุณไม่จำเป็นต้องpolyfill, ,babel-regenerator-runtime babel-plugin-transform-runtimeเป็นต้นหากเบราว์เซอร์เป้าหมายของคุณรองรับ async / คอยแล้ว (แน่นอนถ้าไม่คุณต้องการ polyfill)

ฉันไม่ต้องการใช้webpackอย่างใดอย่างหนึ่ง

คำตอบของ Tyler Long นั้นอยู่ในเส้นทางที่ถูกต้องตั้งแต่ที่เขาแนะนำbabel-preset-env(แต่ฉันไม่สนใจมันก่อนเพราะเขาพูดถึง polifill ในตอนแรก) ฉันยังได้ReferenceError: regeneratorRuntime is not definedตอนแรกจากนั้นฉันก็รู้ว่าเป็นเพราะฉันไม่ได้ตั้งเป้าหมาย หลังจากตั้งค่าเป้าหมายสำหรับโหนดฉันแก้ไขข้อผิดพลาด regeneratorRuntime：

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

เพื่อผู้ใช้ babel7 และ ParcelJS> = ผู้ใช้ 1.10.0

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

นำมาจากhttps://github.com/parcel-bundler/parcel/issues/1762

1 - ติดตั้ง babel-plugin-transform-async-to-module-method, babel-polyfil, bluebird, babel-preset-es2015, babel-core:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - เพิ่ม js babel polyfill ของคุณ:

import 'babel-polyfill';

3 - เพิ่มปลั๊กอินใน .abelabel ของคุณ:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

ที่มา: http://babeljs.io/docs/plugins/transform-async-to-module-method/

ฉันมีการตั้งค่า
ด้วยwebpack ที่ใช้presets: ['es2015', 'stage-0']
และมอคค่าที่ใช้การทดสอบที่รวบรวมโดย webpack

เพื่อให้async/awaitการทดสอบของฉันทำงานได้ทั้งหมดที่ฉันต้องทำคือเพิ่มmocha --require babel-polyfillตัวเลือก

ฉันพบข้อผิดพลาดนี้โดยใช้ gulp กับ rollup เมื่อฉันพยายามใช้เครื่องกำเนิดไฟฟ้า ES6:

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-polyfillเวอร์ชั่น 7 ^ ทำได้ด้วยwebpackver3 ^

Npm ติดตั้งโมดูล npm i -D @babel/polyfill

จากนั้นในwebpackไฟล์ของคุณในentryจุดของคุณทำเช่นนี้

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

Babel 7 ที่ทำงานอยู่ของฉันสำหรับทำปฏิกิริยากับ Regenerator Runtime

.babelrc

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

package.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";

....

หากคุณกำลังสร้างแอปคุณเพียงแค่ต้องการ@babel/preset-envและ@babel/polyfill:

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

(หมายเหตุ: คุณไม่จำเป็นต้องติดตั้งcore-jsและregenerator-runtimeแพ็คเกจเพราะทั้งคู่จะได้รับการติดตั้งโดย @ babel / polyfill)

จากนั้นใน.babelrc:

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

ตอนนี้ตั้งสภาพแวดล้อมเป้าหมายของคุณ ที่นี่เราทำมันใน.browserslistrcไฟล์:

# Browsers that we support

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

สุดท้ายถ้าคุณไปด้วยuseBuiltIns: "entry"ให้ใส่import @babel/polyfillที่ด้านบนของไฟล์บันทึกของคุณ มิฉะนั้นคุณจะทำ

การใช้วิธีนี้จะเลือกนำเข้าไฟล์ polyfills และไฟล์ 'regenerator-runtime' (แก้ไขregeneratorRuntime is not definedปัญหาของคุณที่นี่) เฉพาะในกรณีที่จำเป็นสำหรับสภาพแวดล้อม / เบราว์เซอร์เป้าหมายของคุณ

สำหรับการอ้างอิงในอนาคต :

ในฐานะที่ตั้งไว้ล่วงหน้าของ Babel เวอร์ชัน 7.0.0-beta.55 ได้ถูกลบออกไปแล้ว

อ้างอิงบล็อกhttps://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

ยังคงสามารถใช้ async ที่รอคอยได้

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

การติดตั้ง

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

การใช้งานใน . abelrc

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

และใช้ babel polyfill https://babeljs.io/docs/en/babel-polyfill

การติดตั้ง

npm install --save @babel/polyfill

webpack.config.js

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

ใน 2019 ด้วยBabel 7.4.0+, babel-polyfillแพคเกจได้รับการคัดค้านในความโปรดปรานของรวมทั้งโดยตรงcore-js/stable( core-js@3+เพื่อ Polyfill ECMAScript มี) และregenerator-runtime/runtime(จำเป็นในการใช้ฟังก์ชั่น transpiled กำเนิด):

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

ข้อมูลจากเอกสารbabel-polyfill

วิธีที่ง่ายที่สุดในการแก้ไข 'regeneratorRuntime not define issue' ในคอนโซลของคุณ:

คุณไม่ต้องติดตั้งปลั๊กอินที่ไม่จำเป็น เพียงเพิ่ม:

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

ข้างในร่างกายใน index.html ของคุณ ตอนนี้ควรกำหนด regeneratorRuntime เมื่อคุณเรียกใช้ Babel และตอนนี้ฟังก์ชั่น async / await ของคุณควรได้รับการรวบรวมเป็น ES2015 ได้สำเร็จ

หากคุณใช้ Gulp + Babel สำหรับส่วนหน้าคุณต้องใช้ babel-polyfill

npm install babel-polyfill

จากนั้นเพิ่มแท็กสคริปต์ลงใน index.html เหนือแท็กสคริปต์อื่นทั้งหมดและการอ้างอิง babel-polyfill จาก node_modules