[Babel] Javascript - Async Transform

!markdown

# Babel - 바벨

## Babel - Async

- `Async` 기능에 대해서 소스코드를 Transform할 수 있도록 해주는 방법이다. (많은 Browser에서 사용할 수 있도록)

- Babel7을 예시로 들었으며, Babel7부터는 앞에 @ 를 붙는다. 이전 버전과 호환성에 있어서 혼선이 있을 수 있다.

### 1. npm install

```

npm install --save-dev @babel/plugin-transform-async-to-generator @babel/plugin-transform-regenerator @babel/plugin-transform-runtime babel-plugin-syntax-async-functions

```

```

npm install --save @babel/runtime

```

### 2. .babelrc

```

{

  "presets": [    

  "@babel/preset-env"    

  ],

  "plugins": [

    "syntax-async-functions",

    "@babel/plugin-transform-async-to-generator",

    "@babel/plugin-transform-regenerator",

    "@babel/plugin-transform-runtime"

  ]

}

```

### 3. 실행

### 참고

- Transpile Async Await proposal with Babel.js?: [https://stackoverflow.com/questions/28708975/transpile-async-await-proposal-with-babel-js](https://stackoverflow.com/questions/28708975/transpile-async-await-proposal-with-babel-js)

- babel-plugin-transform-async-to-generator: [https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator](https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator)

- babel-plugin-transform-regenerator : [https://babeljs.io/docs/en/babel-plugin-transform-regenerator](https://babeljs.io/docs/en/babel-plugin-transform-regenerator)

- babel-plugin-transform-runtime#installation: [https://babeljs.io/docs/en/babel-plugin-transform-runtime#installation](https://babeljs.io/docs/en/babel-plugin-transform-runtime#installation)

- babel-plugin-syntax-async-functions: [https://babeljs.io/docs/en/babel-plugin-syntax-async-functions](https://babeljs.io/docs/en/babel-plugin-syntax-async-functions)

- [javascript] async, await를 사용하여 비동기 javascript를 동기식으로 만들자: [https://blueshw.github.io/2018/02/27/async-await/](https://blueshw.github.io/2018/02/27/async-await/)