비동기를 사용하려고하는데 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에서 사용되지 않음 )이 필요합니다. 비동기 / 대기 작동을하려면 설치해야합니다.

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

async / await가있는 .js (샘플 코드)

"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 을 사용하는 경우 @Cemen 주석 entry에 따라 webpack 구성 파일에서 일반적으로 배열 의 첫 번째 값으로 배치해야 합니다 (보통 webpack.config.js).

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-plugin-transform-runtime을 사용합니다 . 플러그인은 다음과 같이 설명됩니다.

헬퍼 및 내장에 대한 참조를 외부화하여 글로벌 오염없이 코드를 자동으로 채 웁니다. 이것이 실제로 무엇을 의미합니까? 기본적으로 Promise, Set, Symbol 등과 같은 내장 기능을 사용할 수 있으며 전역 오염없이 완벽하게 폴리 필이 필요한 모든 Babel 기능을 사용할 수 있으므로 라이브러리에 매우 적합합니다.

또한 내장 된 다른 ES 6과 함께 async / await를 지원합니다.

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

에서 .babelrc, 런타임 플러그인을 추가

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

참고 babel 7을 사용중인 경우 패키지 이름이 @ babel / plugin-transform-runtime 으로 변경되었습니다 .

바벨 7 사용자

대부분의 정보가 이전 버전의 바벨 버전 이었기 때문에이 문제를 해결하는 데 어려움이있었습니다. Babel 7의 경우 다음 두 가지 종속성을 설치하십시오.

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

그리고 .babelrc에서 다음을 추가하십시오.

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

최신 정보

대상을 Chrome으로 설정하면 작동합니다. 그러나 다른 대상에서는 작동하지 않을 수 있습니다. https://github.com/babel/babel-preset-env/issues/112 를 참조하십시오.

따라서이 답변은 원래 질문에 적합 하지 않습니다 . 에 대한 참조로 여기에 보관하겠습니다 babel-preset-env.

간단한 해결책은 import 'babel-polyfill'코드 시작 부분에 추가 하는 것입니다.

웹팩을 사용하는 경우 빠른 해결책은 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"]
      }
    }]
  ]
}

그런 다음 앱이 마지막 2 가지 버전의 Chrome 브라우저에 적합해야합니다.

https://github.com/ai/browserslist 에 따라 Node 를 대상으로 설정 하거나 브라우저 목록을 미세 조정할 수 있습니다

방법을 말하지 마십시오.

나는 정말로 babel-preset-env철학을 좋아합니다 . 어떤 환경을 지원하고 싶은지 말하고 어떻게 지원할 것인지 말하지 마십시오. 선언적 프로그래밍의 아름다움입니다.

나는 테스트 async await했고 그들은 작동합니다. 나는 그들이 어떻게 작동하는지 모르고 정말로 알고 싶지 않습니다. 대신 내 코드와 비즈니스 로직에 시간을 투자하고 싶습니다. 덕분에 babel-preset-envBabel 구성 지옥에서 나를 해방시킵니다.

또는 모든 모듈 babel-polyfill제공이 필요하지 않은 경우 babel-regenerator-runtimewebpack 구성에서 지정할 수 있습니다 .

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

  // ...
};

HMR과 함께 webpack-dev-server를 사용할 때 이렇게하면 모든 빌드에서 컴파일해야하는 파일 수가 상당히 줄어 듭니다. 이 모듈은 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 되어 사용되지 .

일반적으로 폴리 필 / 재생기를 설치하는 방법은 글로벌 네임 스페이스 (옵션 1) 또는 포니 필 (글로벌 오염이없는 옵션 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

core-js polyfill을 사용하는 경우 설치 @babel/runtime-corejs2또는 @babel/runtime-corejs3대신 여기를 참조 하십시오. .

건배

babel-regenerator-runtime지금은 사용되지 않는 대신 하나를 사용해야합니다regenerator-runtime .

와 런타임 생성기를 사용하는 방법 webpack과babel v7 .

설치 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 import'와 'async function'을 모두 가지고 있었지만 polyfill 위에 올리는 함수 구문을 사용하여 ReferenceError: regeneratorRuntime is not defined 오류가 발생했습니다.

이 코드를 변경

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

이에

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

폴리 필 가져 오기 위로 올리지 않도록합니다.

2019 년 10 월 현재 이것은 나를 위해 일했습니다 :

이것을 프리셋에 추가하십시오.

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

그런 다음 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 / await 인식되지 않기 때문에 발생합니다.

나를 위해 설정에 두 가지를 추가하여 오류가 수정되었습니다.

1. 위에서 여러 번 언급했듯이 웹팩 입력 배열에 babel-polyfill을 추가해야했습니다.

   ...
   
   항목 : [ 'babel-polyfill', './index.js'],
   
   ...

2. async / await를 생성기로 컴파일 할 수 있도록 .babelrc를 업데이트해야했습니다.

   {
     "사전 설정": [ "es2015"],
     "플러그인": [ "변환-비동기-발전기"]
   }

DevDependencies :

package.json 파일의 devDependencies에 몇 가지를 설치해야했습니다. 즉, 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͢s의 답변과 비슷하게이 문제를 해결했습니다.

npm install --save-dev regenerator-runtime

그런 다음 내 코드에서 :

import 'regenerator-runtime/runtime';

의 추가 200 kB를 피하는 것이 babel-polyfill좋습니다.

async / await는 ES2015가 아닌 ES2016 기능인 생성기를 사용하기 때문에 오류가 발생합니다. 이 문제를 해결하는 한 가지 방법은 ES2016 ( npm install --save babel-preset-es2016) 용 babel 사전 설정을 설치하고 ES2015 대신 ES2016으로 컴파일하는 것입니다.

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

다른 답변에서 언급 했듯이 polyfill 을 사용할 수도 있습니다 ( 다른 코드가 실행되기 전에 polyfill을 먼저로드 해야합니다 ). 또는 모든 폴리 필 종속성을 포함하지 않으려면 babel-regenerator-runtime 또는 babel-plugin-transform-runtime을 사용할 수 있습니다.

이 오류는 async/await적절한 Babel 플러그인없이 함수를 사용할 때 발생 합니다. 2020 년 3 월 기준으로 다음을 수행하면됩니다. ( @babel/polyfill그리고 많은 승인 된 솔루션은 Babel에서 더 이상 사용되지 않습니다. Babel 문서 에서 자세히 읽으십시오 . )

명령 행에 다음을 입력하십시오.

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"

새 답변 왜 내 답변을 따르나요?

ANS : 나는 당신에게 최신 업데이트 버전 NPM 프로젝트와 답을 주겠다 때문입니다.

2017 년 4 월 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 및 다른 모든 버전을 사용하는 경우 ... SO 변경해야합니다.

webpack.config.js

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

webpack.config.js파일 변경 후이 줄을 코드 맨 위에 추가하십시오.

import "babel-polyfill";

이제 모든 것이 정상인지 확인하십시오. 참조 링크

또한 그의 멋진 답변에 감사드립니다 @BrunoLM.

지원 해야하는 대상 브라우저는 이미 async / await를 지원하지만 모카 테스트를 작성할 때 적절한 설정 없이도 여전히이 오류가 발생합니다.

내가 봤 기사의 대부분은 허용 대답과 높은이 필요하지 않은, 여기에 예를 답변을 투표를 포함, 오래된있다 polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. 등 대상 브라우저가 이미 async / await를 지원하는 경우 (물론 polyfill이 필요하지 않은 경우)

webpack어느 쪽도 사용하고 싶지 않습니다 .

타일러 롱의 대답은 그가 제안한 이래로 올바른 길을 babel-preset-env가고 있습니다 (그러나 처음에 폴리 필을 언급했을 때 먼저 생략했습니다). 나는 여전히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-.babelrc에 플러그인 추가 :

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

출처 : http://babeljs.io/docs/plugins/transform-async-to-module-method/

와 mocha를 사용하여 webpack 으로 설정
했습니다.presets: ['es2015', 'stage-0']
웹팩에 의해 컴파일 테스트를 실행했다.

async/await테스트에서 작동 하게하려면 mocha --require babel-polyfill옵션 추가 만하면됩니다.

ES6 생성기를 사용하려고 할 때 롤업과 함께 gulp를 사용하면이 오류가 발생합니다.

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-polyfillbower 구성 요소 로 포함 된 경우가 있습니다 .

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 상용구 :

.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-envand 만 있으면됩니다 @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십시오. 그렇지 않으면 끝났습니다.

이 방법을 사용하면 대상 환경 / 브라우저에서 필요한 경우 에만 해당 폴리 필 및 '재생기 런타임'파일 ( regeneratorRuntime is not defined여기에서 문제 수정)을 선택적으로 가져옵니다 .

향후 참조를 위해 :

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

바벨 폴리 필 사용 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+ECMAScript를 특징 polyfill하기 위해) 및 regenerator-runtime/runtime(transpiled 발전기 기능을 사용하는 데 필요한)

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

babel-polyfill 설명서의 정보 .

콘솔에서이 'regeneratorRuntime이 정의되지 않은 문제'를 해결하는 가장 쉬운 방법 :

불필요한 플러그인을 설치할 필요가 없습니다. 다음을 추가하십시오.

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

index.html의 본문 내부 이제 babel을 실행하면 regeneratorRuntime이 정의되고 async / await 함수가 ES2015로 성공적으로 컴파일됩니다.

프런트 엔드에 Gulp + Babel을 사용하는 경우 babel-polyfill을 사용해야합니다

npm install babel-polyfill

그런 다음 다른 모든 스크립트 태그 위에 index.html에 스크립트 태그를 추가하고 node_modules에서 babel-polyfill을 참조하십시오