IT TIP

Babel.js로 Async Await 제안을 트랜스 파일 하시겠습니까?

itqueen 2020. 12. 29. 08:11
반응형

Babel.js로 Async Await 제안을 트랜스 파일 하시겠습니까?


C # 스타일을 도입하기위한 제안이 있습니다 async-await. Babel.js가 ES6를 ES5로 트랜스 파일한다는 것을 알고 있지만, async-await를 트랜스 파일 할 수있는 방법이 ES5있습니까?


바벨 v6

Babel v6부터 Babel에는 더 이상 변압기 자체가 포함되어 있지 않습니다. 변환하려는 기능 을 명시 적으로 지정해야합니다 .

사전 설정-비 ES2015 환경

이 작업을 수행하는 가장 빠른 방법은 ES2015 및 최신 제안을 변환하는 데 필요한 플러그인 세트가 이미 포함 된 사전 설정 을 사용 하는 것입니다. 의 경우 사전 설정과 플러그인 async이 필요합니다 ( 문서에 설명 된대로 설치하는 것을 잊지 마십시오 ).es2015es2017runtimebabel-runtime

{
  "presets": [
    "es2015",
    "es2017"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

사전 설정-ES2015 환경

ES2015를 지원하는 환경 (구체적으로는 생성기 및 약속)에서 코드를 실행하는 경우 es2017 사전 설정 만 있으면됩니다.

{
  "presets": [
    "es2017"
  ]
}

커스텀

async기능 만 변환하려면 다음 플러그인이 필요합니다.

syntax-async-functions 모든 경우에 비동기 함수를 구문 분석 할 수 있어야합니다.

비동기 기능 실행 하려면 다음 중 하나를 사용해야합니다.

  • transform-async-to-generator: async함수를 생성기로 변환합니다 . 이것은 Babel의 "공동 루틴"구현을 사용합니다.
  • transform-async-to-module-method: 또한 async함수를 생성기 로 변환 하지만 Babel의 자체 메소드 대신 구성에 지정된 모듈 및 메소드로 전달합니다. 이를 통해 bluebird.

코드가 생성기를 지원하는 환경에서 실행되는 경우 수행 할 작업이 없습니다. 그러나 대상 환경이 생성기를 지원 하지 않는 경우 생성기를 변환해야합니다. 이것은 transform-regenerator변환을 통해 수행됩니다 . 이 변환은 런타임 함수에 따라 다르므로 Babel의 transform-runtime변환 (+ babel-runtime패키지) 도 필요합니다 .

예 :

생성기에 비동기

{
  "plugins": [
    "syntax-async-functions",
    "transform-async-to-generator"
  ]
}

모듈 메서드에 비동기

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

발전기 + 재생기에 비동기

{
  "plugins": [
    "syntax-async-functions",
    "transform-async-to-generator",
    "transform-regenerator",
    "transform-runtime"
  ]
}

Babel v4 이상

예, 실험용 변압기 를 활성화해야합니다 . Babel은 재생기를 사용합니다 .

용법

$ babel --experimental

babel.transform("code", { experimental: true });

이 솔루션은 (2 월 25 일 Felix Kling) 이후로 변경되었거나 비동기 대기를 사용하는 방법이 여전히 여러 가지있을 수 있습니다.

우리를 위해 일한 것은 Babel을 그렇게 실행하는 것이 었습니다.

$ npm install babel-runtime

$ babel inputES7.js -o outputES5.js --optional runtime

I got this working as-of today by doing an additional npm install babel-preset-stage-0 and using it like

var babel = require("babel-core");
var transpiled = babel.transform(code, { "presets": ["stage-0"] });

See


Perhaps even more up-to-date now; just put the babel stuff in a separate file:

'use strict';

require('babel/register'); // Imports babel - auto transpiles the other stuff
require('./app'); // this is es6 - gets transpiled

See my code at how-can-i-use-es2016-es7-async-await-in-my-acceptance-tests-for-a-koa-js-app for some more details.


The approved answer seems to be outdated now. The experimental flag has been deprecated in favor of stage.

http://babeljs.io/blog/2015/03/31/5.0.0/#experimental-option

Usage

$ babel --stage 0

babel.transform("code", { stage: 0 });

Stage 0

  • es7.classProperties
  • es7.comprehensions

Stage 1

  • es7.asyncFunctions
  • es7.decorators
  • es7.exportExtensions
  • es7.objectRestSpread

Stage 2 (Stage 2 and above are enabled by default)

  • es7.exponentiationOperator

ReferenceURL : https://stackoverflow.com/questions/28708975/transpile-async-await-proposal-with-babel-js

반응형