Babel 6 regeneratorRuntime이 정의되지 않았습니다.
비동기를 사용하려고하는데 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필수입니다. async / await가 작동하려면 설치해야합니다.
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 으로 변경되었습니다 .
Babel 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'코드 시작 부분에 추가 하는 것입니다.
webpack을 사용하는 경우 빠른 해결책은 babel-polyfill아래와 같이 추가 하는 것입니다.
entry: {
index: ['babel-polyfill', './index.js']
}
최신 모범 사례를 찾았다 고 생각합니다.
이 프로젝트를 확인하십시오 : https://github.com/babel/babel-preset-env
yarn add --dev babel-preset-env
다음을 바벨 구성으로 사용하십시오.
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}]
]
}
그러면 앱이 Chrome 브라우저의 마지막 2 개 버전으로 이동하는 것이 좋습니다.
Node 를 대상으로 설정 하거나 https://github.com/ai/browserslist 에 따라 브라우저 목록을 미세 조정할 수도 있습니다.
뭘 말해봐, 방법은 말 하지마
babel-preset-env의 철학이 정말 마음에 듭니다 . 어떤 환경을 지원하고 싶은지 알려주세요. 지원 방법은 말하지 마세요. 선언적 프로그래밍의 아름다움입니다.
나는 테스트 async await했고 그들은 작동합니다. 나는 그들이 어떻게 작동하는지 모르고 정말로 알고 싶지 않습니다. 대신 내 코드와 비즈니스 로직에 시간을 보내고 싶습니다. 덕분에 babel-preset-envBabel 구성 지옥에서 벗어날 수 있습니다.
또는 babel-polyfill제공되는 모든 모듈이 필요하지 않은 경우 babel-regenerator-runtime웹팩 구성에서 지정할 수 있습니다 .
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-regenerator-runtime이제는 사용되지 않습니다 . 대신 regenerator-runtime.
webpack및 babelv7 에서 런타임 생성기를 사용하려면 :
설치 regenerator-runtime:
npm i -D regenerator-runtime
그런 다음 webpack 구성 내에 추가하십시오.
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
게양 된 기능에주의
동일한 파일에 'polyfill import'와 'async function'이 모두 있었지만 polyfill 위에 올리는 함수 구문을 사용하여 ReferenceError: regeneratorRuntime is not defined오류가 발생했습니다.
이 코드 변경
import "babel-polyfill"
async function myFunc(){ }
이에
import "babel-polyfill"
var myFunc = async function(){}
폴리 필 가져 오기 위로 들어 올려지는 것을 방지합니다.
Babel 7.4.0, core-js 3
현재 바벨 7.4.0 , @babel/polyfill 한다 되지 않습니다 .
일반적으로 polyfills / regenerator를 설치하는 방법은 두 가지가 있습니다 : 전역 네임 스페이스 (옵션 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-preset-stage-2스크립트를 --require babel-polyfill.
제 경우에는 Mocha테스트 에서이 오류가 발생했습니다 .
다음 문제 해결
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
내 프로젝트를 typescript 프로젝트로 변환 한 후이 오류가 발생하기 시작했습니다. 내가 이해하는 바에 따르면 문제는 async / await가 인식되지 않기 때문입니다.
나에게 오류는 내 설정에 두 가지를 추가하여 수정되었습니다.
위에서 여러 번 언급했듯이 웹팩 항목 배열에 babel-polyfill을 추가해야했습니다.
... 항목 : [ 'babel-polyfill', './index.js'], ...
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 요점에서 코드를 얻었습니다 .
.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"
}
}
]
]
}
async / await가 ES2015가 아닌 ES2016 기능인 생성기를 사용하기 때문에 오류가 발생합니다. 이 문제를 해결하는 한 가지 방법은 ES2016 ( npm install --save babel-preset-es2016) 용 바벨 사전 설정을 설치하고 ES2015 대신 ES2016으로 컴파일하는 것입니다.
"presets": [
"es2016",
// etc...
]
다른 답변에서 언급 했듯이 폴리 필 을 사용할 수도 있습니다 ( 다른 코드가 실행되기 전에 먼저 폴리 필 을 로드해야 함 ). 또는 모든 polyfill 종속성을 포함하지 않으려면 babel-regenerator-runtime 또는 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';
테스트를 위해 테스트 스크립트에 -require 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 및 기타 모든 버전의 UP 버전을 사용하는 경우 ... 변경해야합니다.
webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
webpack.config.js파일 변경 후이 줄을 코드 맨 위에 추가하십시오.
import "babel-polyfill";
이제 모든 것이 정상인지 확인하십시오. 참조 링크
또한 그의 멋진 답변에 대해 @BrunoLM에게 감사드립니다.
Chrome에서이 문제가 발생했습니다. RienNeVaPlu͢s의 답변과 유사하게 이것은 나를 위해 해결되었습니다.
npm install --save-dev regenerator-runtime
그런 다음 내 코드에서 :
import 'regenerator-runtime/runtime';
에서 추가 200kB를 피하게되어 기쁩니다 babel-polyfill.
지원해야하는 대상 브라우저는 이미 async / await를 지원하지만 적절한 설정없이 mocha 테스트를 작성할 때 여전히이 오류가 발생합니다.
내가 봤 기사의 대부분은 허용 대답과 높은이 필요하지 않은, 여기에 예를 답변을 투표를 포함, 오래된있다 polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. 등. 대상 브라우저가 이미 async / await를 지원하는 경우 (물론 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-.babelrc에 플러그인 추가 :
{
"presets": ["es2015"],
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
출처 : http://babeljs.io/docs/plugins/transform-async-to-module-method/
나는 설치했다
과 웹팩 사용 presets: ['es2015', 'stage-0']
및 모카 웹팩에 의해 컴파일 테스트를 실행했다.
async/await테스트 작업을 수행 하려면 mocha --require babel-polyfill옵션을 추가하기 만하면됩니다.
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";
....
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/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십시오. 그렇지 않으면 완료됩니다.
이 방법을 사용하면 대상 환경 / 브라우저에서 필요한 경우 에만 해당 폴리 필과 '재생 성자 런타임'파일 ( regeneratorRuntime is not defined여기에서 문제 해결) 을 선택적으로 가져옵니다 .
이 솔루션은 오래되었습니다.
이 비디오 https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg 의 YouTube 댓글에서 해결책을 찾았습니다.
올바른 설명으로 연결되어야합니다. 해결책을 찾기 위해 "beth w"에게 많은 소도구.
Beth W 3 개월 전 (편집 됨)
2019 년에 변경해야 할 또 다른 변경 사항-babel은 v7에서 더 이상 stage-0 사전 설정을 사용하지 않으므로 'npm install --save-dev babel-polyfill babel 대신 26:15 -preset-stage-0 ', 나는해야했다 :
npm install --save @babel/polyfill이전 옵션을 모두 포함합니다. 그런 다음 앱의 진입 점에서> '@ babel / polyfill'을 포함하고 쿼리 사전 설정에서 그대로 두었습니다. 따라서 webpack 구성은 다음과 같이 보입니다.
const path = require('path');
module.exports = {
entry: {
app: ['@babel/polyfill', './src/app.js']
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
mode: 'development',
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}]
}
}
누군가에게 도움이되기를 바랍니다!
프런트 엔드에 Gulp + Babel을 사용하는 경우 babel-polyfill을 사용해야합니다.
npm install babel-polyfill
그런 다음 다른 모든 스크립트 태그 위에 index.html에 스크립트 태그를 추가하고 node_modules에서 babel-polyfill을 참조하십시오.
이러한 답변의 대부분은 WebPack을 사용하여이 오류를 처리하기위한 솔루션을 권장합니다. 그러나 누군가가 (저처럼) RollUp을 사용하는 경우 마침내 저에게 효과가 있었던 것은 다음과 같습니다.
.babelrc
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["external-helpers",
[
"transform-runtime",
{
"polyfill": false,
"regenerator": true
}
]]
}
rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'src/entry.js',
output: {
file: 'dist/bundle.js',
format: 'umd',
name: 'MyCoolLib',
exports: 'named'
},
sourcemap: true,
plugins: [
commonjs({
// polyfill async/await
'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
}),
resolve(),
babel({
runtimeHelpers: true,
exclude: 'node_modules/**', // only transpile our source code
}),
uglify()
]
};
React와 Django 프로젝트를 사용하고 있으며 regenerator-runtime. @babel/polyfill앱의 크기가 더 커지고 더 이상 사용되지 않기 때문에이 작업을 수행해야합니다 . 또한 이 튜토리얼의 에피소드 1과 2를 따라 프로젝트 구조 를 만들었습니다 .
*package.json*
...
"devDependencies": {
"regenerator-runtime": "^0.13.3",
...
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-class-properties"]
}
index.js
...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...
webpack / babel 빌드로 작업하는 비동기 대기가 있습니다.
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc :
"presets": ["es2015", "stage-3"]
In a scenario where a custom babelHelpers.js file is created using babel.buildExternalHelpers() with babel-plugin-external-helpsers I figured the least costly solution for the client is to prepend the regenerator-runtime/runtime.js to the output instead of all polyfills.
// runtime.js
npm install --save regenerator-runtime
// building the custom babelHelper.js
fs.writeFile(
'./babelHelpers.js',
fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
+ '\n'
+ require('babel-core').buildExternalHelpers()
)
This solution comes down to about 20 KB instead of ~230 KB when including babel-polyfill.
참고URL : https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined
'developer tip' 카테고리의 다른 글
| 'Conda'는 내부 또는 외부 명령으로 인식되지 않습니다. (0) | 2020.10.04 |
|---|---|
| Sourcetree에서 Git 저장소가있는 폴더의 모든 파일을 무시하려면 어떻게합니까? (0) | 2020.10.04 |
| MySQL에서 INDEX, PRIMARY, UNIQUE, FULLTEXT의 차이점은 무엇입니까? (0) | 2020.10.03 |
| Java에서 ==와 equals ()의 차이점은 무엇입니까? (0) | 2020.10.03 |
| 여러 열의 SQLite 기본 키 (0) | 2020.10.03 |