Tôi đang cố gắng sử dụng async, chờ đợi từ đầu trên Babel 6, nhưng tôi không nhận được trình tái tạo.

tập tin .babelrc

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

tập tin pack.json

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

tập tin .js

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

Sử dụng nó bình thường mà không có async / await hoạt động tốt. Bất cứ ý tưởng những gì tôi đang làm sai?

babel-polyfill( không dùng nữa kể từ Babel 7.4). Bạn cũng phải cài đặt nó để có được async / đang chờ làm việc.

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

pack.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 với async / await (mã mẫu)

"use strict";

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

function bar() {
  return "bar";
}

Trong tập tin khởi động

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

Nếu bạn đang sử dụng webpack, bạn cần đặt nó làm giá trị đầu tiên của entrymảng trong tệp cấu hình webpack của bạn (thường webpack.config.js), theo nhận xét của @Cemen:

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

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

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

Nếu bạn muốn chạy thử nghiệm với babel thì hãy sử dụng:

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

Bên cạnh polyfill, tôi sử dụng babel-plugin-Transform-runtime . Plugin được mô tả là:

Bên ngoài tham chiếu đến người trợ giúp và nội dung, tự động điền mã của bạn mà không gây ô nhiễm toàn cầu. Điều này thực sự có nghĩa là gì? Về cơ bản, bạn có thể sử dụng các tính năng tích hợp như Promise, Set, Symbol, v.v. cũng như sử dụng tất cả các tính năng Babel yêu cầu một polyfill liền mạch, không gây ô nhiễm toàn cầu, làm cho nó cực kỳ phù hợp cho các thư viện.

Nó cũng bao gồm hỗ trợ cho async / await cùng với các tích hợp khác của ES 6.

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

Trong .babelrc , thêm plugin thời gian chạy

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

Lưu ý Nếu bạn đang sử dụng babel 7, gói đã được đổi tên thành @ babel / plugin-Transform-runtime .

Babel 7 người dùng

Tôi đã gặp một số rắc rối xung quanh vấn đề này vì hầu hết thông tin là dành cho các phiên bản babel trước đó. Đối với Babel 7, cài đặt hai phụ thuộc này:

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

Và, trong .babelrc, thêm:

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

Cập nhật

Nó hoạt động nếu bạn đặt mục tiêu thành Chrome. Nhưng nó có thể không hoạt động cho các mục tiêu khác, vui lòng tham khảo: https://github.com/babel/babel-preset-env/issues/112

Vì vậy, câu trả lời này là KHÔNG hoàn toàn đúng cho câu hỏi ban đầu. Tôi sẽ giữ nó ở đây như một tài liệu tham khảo babel-preset-env.

Một giải pháp đơn giản là thêm import 'babel-polyfill'vào đầu mã của bạn.

Nếu bạn sử dụng gói web, một giải pháp nhanh chóng là thêm babel-polyfillvào như dưới đây:

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

Tôi tin rằng tôi đã tìm thấy thực hành tốt nhất mới nhất.

Kiểm tra dự án này: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Sử dụng như sau cấu hình babel của bạn:

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

Sau đó, ứng dụng của bạn sẽ hoạt động tốt trong 2 phiên bản trình duyệt Chrome cuối cùng.

Bạn cũng có thể đặt Node làm mục tiêu hoặc tinh chỉnh danh sách trình duyệt theo https://github.com/ai/browserslist

Nói cho tôi biết, đừng nói với tôi như thế nào.

Tôi thực sự thích babel-preset-envtriết lý của bạn: cho tôi biết bạn muốn hỗ trợ môi trường nào, KHÔNG cho tôi biết cách hỗ trợ họ. Đó là vẻ đẹp của lập trình khai báo.

Tôi đã thử nghiệm async awaitvà họ làm việc. Tôi không biết làm thế nào họ làm việc và tôi thực sự không muốn biết. Thay vào đó, tôi muốn dành thời gian cho mã riêng và logic kinh doanh của mình. Nhờ babel-preset-env, nó giải phóng tôi khỏi địa ngục cấu hình Babel.

Ngoài ra, nếu bạn không cần tất cả các mô-đun babel-polyfillcung cấp, bạn chỉ có thể chỉ định babel-regenerator-runtimetrong cấu hình gói webpack của mình:

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

  // ...
};

Khi sử dụng webpack-dev-server với HMR, việc này giúp giảm số lượng tệp mà nó phải biên dịch trên mỗi bản dựng khá nhiều. Mô-đun này được cài đặt như một phần babel-polyfillvì vậy nếu bạn đã có thì bạn vẫn ổn, nếu không bạn có thể cài đặt riêng nó npm i -D babel-regenerator-runtime.

Giải pháp đơn giản của tôi:

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 trở lên (core-js 2/3)

Tính đến Babel 7.4.0 , @babel/polyfill được tán thành .

Nói chung, có hai cách để cài đặt polyfill / tái tạo: thông qua không gian tên toàn cầu (Tùy chọn 1) hoặc dưới dạng ponyfill (Tùy chọn 2, không gây ô nhiễm toàn cầu).

Lựa chọn 1: @babel/preset-env

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

sẽ tự động sử dụng regenerator-runtimevà core-jstheo mục tiêu của bạn . Không cần phải nhập bất cứ thứ gì bằng tay. Đừng quên cài đặt phụ thuộc thời gian chạy:

npm i --save regenerator-runtime core-js

Hoặc, đặt useBuiltIns: "entry"và nhập thủ công:

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

Lựa chọn 2: @babel/transform-runtime với @babel/runtime(không có ô nhiễm phạm vi toàn cầu)

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

Cài đặt nó:

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

Nếu bạn sử dụng các polyfill core-js, bạn cài đặt @babel/runtime-corejs2hoặc @babel/runtime-corejs3thay vào đó, xem tại đây .

Chúc mừng

babel-regenerator-runtimebây giờ không được dùng nữa , thay vào đó người ta nên sử dụngregenerator-runtime .

Để sử dụng trình tạo thời gian chạy với webpackvàbabel v7:

cài đặt regenerator-runtime:

npm i -D regenerator-runtime

Và sau đó thêm vào trong cấu hình webpack:

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

Cập nhật .babelrctệp của bạn theo các ví dụ sau, nó sẽ hoạt động.

Nếu bạn đang sử dụng @babel/preset-envgói

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

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

Cẩn thận với các chức năng nâng

Tôi đã có cả 'nhập polyfill' và 'hàm async' của mình trong cùng một tệp, tuy nhiên tôi đang sử dụng cú pháp hàm nâng nó lên trên polyfill sẽ cung cấp cho tôi ReferenceError: regeneratorRuntime is not defined lỗi .

Thay đổi mã này

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

đến đây

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

để ngăn chặn nó được nâng lên trên nhập khẩu polyfill.

Kể từ tháng 10 năm 2019, điều này làm việc cho tôi:

Thêm điều này vào cài đặt trước.

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

Sau đó cài đặt bộ tái sinh-thời gian chạy bằng npm.

npm i regenerator-runtime

Và sau đó trong tệp chính của bạn sử dụng: (quá trình nhập này chỉ được sử dụng một lần)

import "regenerator-runtime/runtime";

Điều này sẽ cho phép bạn sử dụng async awaitstrong tệp của mình và xóaregenerator error

Nếu sử dụng babel-preset-stage-2thì chỉ cần bắt đầu tập lệnh với--require babel-polyfill .

Trong trường hợp của tôi, lỗi này đã được ném bởi Mocha kiểm tra.

Đã khắc phục sự cố

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

Tôi bắt đầu nhận được lỗi này sau khi chuyển đổi dự án của tôi thành một dự án bản thảo. Từ những gì tôi hiểu, vấn đề bắt nguồn từ async / await không được công nhận.

Đối với tôi, lỗi đã được sửa bằng cách thêm hai thứ vào thiết lập của tôi:

1. Như đã đề cập ở trên nhiều lần, tôi cần thêm babel-polyfill vào mảng mục nhập gói webpack của mình:

   ...
   
   mục nhập: ['babel-polyfill', './index.js'],
   
   ...

2. Tôi cần cập nhật .babelrc của mình để cho phép bổ sung async / await vào trình tạo:

   {
     "cài đặt trước": ["es2015"],
     "plugin": ["Transform-async-to-Generator"]
   }

DevDependencies:

Tôi đã phải cài đặt một vài thứ vào devDependencies của mình trong tệp pack.json. Cụ thể, tôi đã thiếu babel-plugin-Transform-async-to-Generator, babel-polyfill và 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"
 }

Mã chính đầy đủ:

Tôi đã nhận được mã từ một ý chính GitHub thực sự hữu ích và súc tích mà bạn có thể tìm thấy ở đây .

Tôi gặp vấn đề này trong Chrome. Tương tự như câu trả lời của RienNeVaPlus, điều này đã giải quyết nó cho tôi:

npm install --save-dev regenerator-runtime

Sau đó, trong mã của tôi:

import 'regenerator-runtime/runtime';

Hạnh phúc để tránh thêm 200 kB từ babel-polyfill.

Bạn đang gặp lỗi vì async / đang chờ sử dụng trình tạo, là tính năng ES2016, không phải ES2015. Một cách để khắc phục điều này là cài đặt cài đặt sẵn babel cho ES2016 ( npm install --save babel-preset-es2016) và biên dịch sang ES2016 thay vì ES2015:

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

Như các câu trả lời khác đề cập, bạn cũng có thể sử dụng polyfill (mặc dù hãy chắc chắn rằng bạn tải polyfill trước khi bất kỳ mã nào khác chạy). Ngoài ra, nếu bạn không muốn bao gồm tất cả các phụ thuộc polyfill, bạn có thể sử dụng babel- rebator -runtime hoặc babel-plugin-Transform-runtime .

Lỗi này xảy ra khi các async/awaitchức năng được sử dụng mà không có plugin Babel thích hợp. Kể từ tháng 3 năm 2020, sau đây là tất cả những gì bạn cần làm. ( @babel/polyfillvà rất nhiều giải pháp được chấp nhận đã bị phản đối ở Babel. Đọc thêm trong tài liệu về Babel. )

Trong dòng lệnh, gõ:

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

Trong babel.config.jstập tin của bạn , thêm plugin này @babel/plugin-transform-runtime. Lưu ý: Ví dụ dưới đây bao gồm các cài đặt trước và plugin khác mà tôi có cho một dự án React / Node / Express nhỏ mà tôi đã làm gần đây:

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

Tôi đã sửa lỗi này bằng cách cài đặt babel-polyfill

npm install babel-polyfill --save

sau đó tôi đã nhập nó vào điểm nhập ứng dụng của mình

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

để thử nghiệm tôi đã bao gồm - yêu cầu babel-polyfill trong tập lệnh thử nghiệm của tôi

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

Câu trả lời mới Tại sao bạn làm theo câu trả lời của tôi?

Trả lời: Bởi vì tôi sẽ cho bạn câu trả lời với dự án npm phiên bản cập nhật mới nhất.

14/11/2017

"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"

Nếu bạn sử dụng phiên bản UP này hoặc nhiều hơn phiên bản UP của Npm và tất cả các ... SO khác chỉ cần thay đổi:

webpack.config.js

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

Sau khi thay đổi webpack.config.jstập tin Chỉ cần thêm dòng này vào đầu mã của bạn.

import "babel-polyfill";

Bây giờ kiểm tra mọi thứ là ok. Liên kết tham khảo

Cũng cảm ơn @BrunoLM vì câu trả lời hay của anh ấy.

Các trình duyệt được nhắm mục tiêu tôi cần hỗ trợ đã hỗ trợ async / await, nhưng khi viết bài kiểm tra mocha, không có cài đặt phù hợp tôi vẫn gặp lỗi này.

Hầu hết các bài viết tôi googled đang lỗi thời, trong đó có câu trả lời được chấp nhận và bình chọn cao câu trả lời ở đây, tức là bạn không cần polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. v.v. nếu trình duyệt mục tiêu của bạn đã hỗ trợ async / await (tất nhiên nếu không bạn cần polyfill)

Tôi cũng không muốn sử dụng webpack.

Câu trả lời của Tyler Long thực sự đang đi đúng hướng kể từ khi anh ấy đề xuất babel-preset-env(nhưng tôi đã bỏ qua nó đầu tiên khi anh ấy đề cập đến polifill lúc đầu). Tôi vẫn nhận được ReferenceError: regeneratorRuntime is not definedngay từ đầu sau đó tôi nhận ra đó là vì tôi đã không đặt mục tiêu. Sau khi thiết lập mục tiêu cho nút, tôi sửa lỗi tái tạo

  "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
      }]
    ]
  }

Để người dùng babel7 và người dùng 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
    }]
  ]
}

lấy từ https://github.com/parcel-bundler/parcel/issues/1762

1 - Cài đặt phương thức babel-plugin-Transform-async-to-module, 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 - Thêm vào polyfill js babel của bạn:

import 'babel-polyfill';

3 - Thêm plugin trong .babelrc của bạn:

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

Nguồn: http://babeljs.io/docs/plugins/transform-async-to-module-method/

Tôi đã có một thiết lập
với webpack bằng cách sử dụng presets: ['es2015', 'stage-0']
và mocha đang chạy thử nghiệm được biên dịch bởi webpack.

Để làm cho async/awaitcác bài kiểm tra của tôi hoạt động, tất cả những gì tôi phải làm là thêm mocha --require babel-polyfilltùy chọn.

Tôi gặp lỗi này khi sử dụng gulp với rollup khi tôi cố gắng sử dụng trình tạo 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 }));
});

Tôi có thể giải pháp là bao gồm babel-polyfillthành phần bower:

bower install babel-polyfill --save

và thêm nó dưới dạng phụ thuộc trong index.html:

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

Đối với những người muốn sử dụng babel-polyfillphiên bản 7 ^, hãy làm điều này với webpackver3 ^.

Npm cài đặt mô-đun npm i -D @babel/polyfill

Sau đó, trong webpacktập tin của bạn theo entryquan điểm của bạn làm điều này

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

Công việc nấu ăn babel 7 của tôi để phản ứng với thời gian chạy bộ tái sinh:

.babelrc

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

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

....

Nếu bạn đang xây dựng một ứng dụng, bạn chỉ cần @babel/preset-envvà @babel/polyfill:

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

(Lưu ý: bạn không cần phải cài đặt core-jsvàregenerator-runtime các gói vì cả hai sẽ được cài đặt bởi @ babel / polyfill)

Sau đó trong .babelrc:

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

Bây giờ thiết lập môi trường mục tiêu của bạn. Ở đây, chúng tôi làm điều đó trong .browserslistrctập tin:

# Browsers that we support

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

Cuối cùng, nếu bạn đã đi cùng useBuiltIns: "entry", đặt import @babel/polyfillở đầu tệp nhập cảnh của bạn. Nếu không, bạn đã làm xong.

Sử dụng phương pháp này sẽ nhập có chọn lọc các polyfill đó và tệp 'bộ tạo thời gian chạy' (khắc phục sự cố của bạn regeneratorRuntime is not definedở đây) CHỈ nếu chúng cần cho bất kỳ môi trường / trình duyệt đích nào của bạn.

để tham khảo trong tương lai :

Kể từ phiên bản Babel phiên bản 7.0.0-beta.55 đã bị xóa

tham khảo blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async await vẫn có thể được sử dụng bởi

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

cài đặt

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

sử dụng trong .babelrc

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

và sử dụng polyfill babel https://babeljs.io/docs/en/babel-polyfill

cài đặt

npm install --save @babel/polyfill

webpack.config.js

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

Năm 2019 với Babel 7.4.0+, babel-polyfillgói đã không được hỗ trợ trực tiếp bao gồm core-js/stable( core-js@3+, đối với các tính năng ECMAScript của polyfill) và regenerator-runtime/runtime(cần thiết để sử dụng các chức năng của trình tạo được sao chép):

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

Thông tin từ babel-polyfill tài liệu .

Cách dễ nhất để khắc phục 'vấn đề tái tạo không được xác định' này trong bảng điều khiển của bạn:

Bạn không phải cài đặt bất kỳ plugin không cần thiết. Chỉ cần thêm:

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

bên trong cơ thể trong index.html của bạn. Bây giờ, hàm tái tạo nên được xác định khi bạn chạy babel và bây giờ các hàm async / await của bạn sẽ được biên dịch thành công vào ES2015

Nếu bạn sử dụng Gulp + Babel cho một frontend, bạn cần sử dụng babel-polyfill

npm install babel-polyfill

và sau đó thêm thẻ script vào index.html trên tất cả các thẻ script khác và tham chiếu babel-polyfill từ node_modules