Babel.js로 Async Await 제안을 트랜스 파일 하시겠습니까?
C # 스타일을 도입하기위한 제안이 있습니다 async-await
. Babel.js가 ES6를 ES5로 트랜스 파일한다는 것을 알고 있지만, async-await를 트랜스 파일 할 수있는 방법이 ES5
있습니까?
바벨 v6
Babel v6부터 Babel에는 더 이상 변압기 자체가 포함되어 있지 않습니다. 변환하려는 기능 을 명시 적으로 지정해야합니다 .
사전 설정-비 ES2015 환경
이 작업을 수행하는 가장 빠른 방법은 ES2015 및 최신 제안을 변환하는 데 필요한 플러그인 세트가 이미 포함 된 사전 설정 을 사용 하는 것입니다. 의 경우 및 사전 설정과 플러그인 async
이 필요합니다 ( 문서에 설명 된대로 설치하는 것을 잊지 마십시오 ).es2015
es2017
runtime
babel-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
'IT TIP' 카테고리의 다른 글
이동 : 고유 한 경우 추가 (0) | 2020.12.29 |
---|---|
xcode 단위 테스트에서 파일로드 (0) | 2020.12.29 |
PEP8 – sys.path를 사용하여 파일 맨 위에 가져 오지 않음 (0) | 2020.12.29 |
Angular 2의 자식 구성 요소에서 부모 구성 요소 속성 업데이트 (0) | 2020.12.29 |
'router-outlet'은 알려진 요소가 아닙니다. (0) | 2020.12.29 |