Babel 6 재생기 런타임이 정의되지 않았습니다
비동기를 사용하려고하는데 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필요합니다. 비동기 / 대기 작동을하려면 설치해야합니다.
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-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(){}
폴리 필 가져 오기 위로 올리지 않도록합니다.
바벨 7.4.0, 코어 -JS 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-preset-stage-2스크립트를 시작하면됩니다 --require babel-polyfill.
내 경우에는이 오류가 Mocha테스트에 의해 발생했습니다 .
다음 문제를 해결
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
프로젝트를 타이프 스크립트 프로젝트로 변환 한 후이 오류가 발생하기 시작했습니다. 내가 이해 한 바에 따르면, 문제는 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) 용 babel 사전 설정을 설치하고 ES2015 대신 ES2016으로 컴파일하는 것입니다.
"presets": [
"es2016",
// etc...
]
다른 답변에서 언급 했듯이 polyfill 을 사용할 수도 있습니다 ( 다른 코드가 실행되기 전에 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';
테스트를 위해-테스트 스크립트에 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.
Chrome 에서이 문제가 발생했습니다. RienNeVaPlu͢s의 답변과 비슷하게이 문제를 해결했습니다.
npm install --save-dev regenerator-runtime
그런 다음 내 코드에서 :
import 'regenerator-runtime/runtime';
의 추가 200 kB를 피하는 것이 babel-polyfill좋습니다.
지원 해야하는 대상 브라우저는 이미 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/
나는 설치했다
과 웹팩 사용 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-envand 만 있으면됩니다 @babel/polyfill.
npm i -D @babel/preset-env
npm i @babel/polyfill
(참고 : @ babel / polyfill에 의해 설치되었으므로 core-js및 regenerator-runtime패키지 를 설치할 필요가 없습니다. )
그런 다음 .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여기서 문제 수정)을 선택적으로 가져옵니다 .
이 솔루션은 오래되었습니다.
이 비디오의 YouTube 댓글에서 해결책을 찾았습니다 https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg
이것은 올바른 주석으로 연결되어야합니다. 해결책을 찾기 위해 "베스 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이전 옵션 모두를 다루고 있습니다. 그런 다음 앱 I의 진입 점에 '@ babel / polyfill'을 포함 시켰으며 쿼리 사전 설정에는 그대로 두었습니다. 따라서 웹팩 구성은 다음과 같이 보입니다.
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을 사용하여이 오류를 처리하기위한 솔루션을 권장합니다. 그러나 누군가가 롤업을 사용하는 경우 (나와 같이) 마침내 나를 위해 일한 것입니다 (출력 크기 약 10k tot 의이 폴리 필 광고 묶음).
.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 and 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 빌드로 작업하기 위해 async await가 있습니다.
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc :
"presets": ["es2015", "stage-3"]
사용자 정의 시나리오에서는 babelHelpers.js파일을 사용하여 만들어집니다 babel.buildExternalHelpers()로 babel-plugin-external-helpsersI 클라이언트에 대한 최소 비용이 많이 드는 솔루션이 앞에 추가하는 것입니다 생각 regenerator-runtime/runtime.js대신에 모든 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()
)
이 솔루션은 포함시 ~ 230KB 대신 약 20KB로 내려갑니다 babel-polyfill.
참고 URL : https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined
'Programing' 카테고리의 다른 글
| UITextField 텍스트 변경 이벤트 (0) | 2020.02.10 |
|---|---|
| nullptr은 정확히 무엇입니까? (0) | 2020.02.10 |
| Javascript에서 객체의 첫 번째 속성에 액세스하는 방법은 무엇입니까? (0) | 2020.02.09 |
| 기기에서 프레임 워크가 충돌하는 iOS 앱, dyld : 라이브러리가로드되지 않음, Xcode 6 베타 (0) | 2020.02.09 |
| 힘내 푸시 결과 "인증 실패" (0) | 2020.02.09 |