babel v6 での loose mode

overview

ひさびさにbabelを使ったら、version 6になっていてloose optionが削除され、指定方法が変わっていたのでmemo

6.0.0

• Breaking Change
  • Remove loose option in favor of plugin options.

changelog

「loose optionは削除したので、pluginのoptionを使って」って感じ？

ということで.babelrcなどでpluginを指定して、loose optionを指定してあげましょう

babelrc

{
  "presets": ["es2015"],
  "plugins": [
    ["transform-es2015-classes", { "loose": true }],
    ["transform-es2015-computed-properties", { "loose": true }],
    ["transform-es2015-template-literals", { "loose": true }],
    ["transform-es2015-for-of", { "loose": true }],
    ["transform-es2015-modules-commonjs", { "loose": true }],
    ["transform-es2015-spread", { "loose": true }],
    ["transform-es2015-destructuring", { "loose": true }]
  ]
}

他にもloose optionのあるpluginがあったら編集リクエストいただけると幸いです<(_ _)>

gulp-watchify + babelify の場合

var gulp    = require("gulp"),
  watchify = require("gulp-watchify");

gulp.task("watch", watchify(function(watchify){
  return gulp.src("./src/index.js")
    .pipe(watchify({
      watch: true,
      setup: function(bundle) {
        bundle.transform(require("babelify"), {
          presets: ['es2015'],
          plugins: [
            ["transform-es2015-classes", { "loose": true }],
            ["transform-es2015-computed-properties", { "loose": true }],
            ["transform-es2015-template-literals", { "loose": true }],
            ["transform-es2015-for-of", { "loose": true }],
            ["transform-es2015-modules-commonjs", { "loose": true }],
            ["transform-es2015-spread", { "loose": true }],
            ["transform-es2015-destructuring", { "loose": true }]
          ],
          extensions: [".babel"]
        })
      }
    }))
    .pipe(gulp.dest("./dist/"));
}));