Webpack2와 최소한의 babel transform으로 Chrome에서 움직이는 JS

먼저 말해두면 IE11은 죽는다.

무엇을 하고 싶은가

전제로 현대에서는 ES Modules를 제외하면 대부분의 현대 브라우저(IE11 제외)에서 ES2015는 구현이 끝나고 있으며, IE11과 같은 특정 환경을 제외하면 약간의 변환으로 ES201x의 코드가 움직인다. 잘하면 컴파일 시간도 babel의 기동 시간도 단축할 수 있다. 여러 번 말하지만 IE11은 죽는다.

그리고 지난주 출시된 Chrome55에서 async/await가 디폴트로 유효하게 되었다. 이것으로 무엇을 할 수 있을까, babel로 async/await를 컴파일하면 CPS 변환으로 거대한 스위치 문으로 변환하고 어쨌든 코드를 읽는 것이 어렵다는 문제가 있고 그것을 네이티브 기능을 사용하여 해결 할 수 있다. (소스 맵도 잘 모르는 곳으로 날아가서 사용할 수 없었다)

이 접근법을 시도할 때의 문제

browserify/webpack(1) 은 require로 commonjs를 해결하는데 AST의 퍼스, 변형을 하는 것이지만, 그 입력으로서 ES5 수준의 코드까지 컴파일되어 있다고 가정하고 있기 때문에 ES2015의 코드를 먹여 둘 다 죽어 버린다.

그래서 그 근처가 고려되고, 또한 async/await도 통할 수 있는 webpack2를 사용했다. 진짜는 browserify 쪽을 좋아하지만 파서에 개입할 수 있는 기색이 없기 때문에, substack 가 그 필요를 알아차릴 때까지 기다린다.

설정

.babelrc

{
  "plugins": [
    "syntax-async-functions",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-react-jsx",
    "transform-flow-strip-types"
  ]
}

package.json

{
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.21.0",
    "babel-plugin-transform-object-rest-spread": "^6.20.2",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "webpack": "2.1.0-beta.25",
    "webpack-async-await": "^1.1.0"
  }
}

webpack.config.js

const webpack = require('webpack');
const AsyncAwaitPlugin = require('webpack-async-await') ;

module.exports = {
  entry: './src/main.js',
  output: {
    path: "public",
    filename: 'bundle.js'
  },
  plugins: [
    new AsyncAwaitPlugin({})
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

가정하는 디렉토리는

- .babelrc
- webpack.config.js
- package.json
- public
    -  bundle.js
-  src
    -  main.js

에서 $ webpack 라고 두드리면 빌드된다. 자신의 취미로 flowtype이라든지 jsx라든지 들어가 있지만 어디의 변은 필요없는 사람은 필요 없을 것이다.

webpack-async-await 는 안에서 사용하고 있는 acorn 에 async-await 의 파서를 더해 떨어지지 않게 하고 있는 느낌의 코드였다. 워크 어라운드이므로 그 중 필요하지 않을 것이라고 생각합니다.

결과

debugger가 이상한 switch에 휘말리지 않고 제대로 움직여 최고.

Chrome만으로는 프로덕션에서 사용할 수 없다? 이것은 내가 취미로 놀기 위한 환경이며 일에서 사용하려면 환경 변수로 다단으로 빌드 옵션을 바꾸거나 그런 이야기가 되어 각자 마음대로 노력해 줘.