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

JAVASCRIPT / 글쓴이

비동기를 사용하려고하는데 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대신 여기를 참조 하십시오. .

건배