Programing

Babel 6 재생기 런타임이 정의되지 않았습니다

lottogame 2020. 2. 9. 20:30
반응형

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.

webpackbabelv7 과 함께 런타임 생성기를 사용하려면

설치 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 인식되지 않기 때문에 발생합니다.

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

  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의의 요지 코드를 가지고 여기에 .


.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-jsregenerator-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



반응형