scramble cadenza

技術ネタのガラクタ置き場

babelify7.0.2 で jsx の compile に失敗する件

javascript

現象

  • babelify 7.0.2
  • browserify 12.0.1
  • react 0.14.1
var React = require('react');

var Container = React.createClass({
  render: function() {
    <div>test</div>
  }
});

React.render(
  <Container />,
  document.getElementById('container')
);

% browserify -t babelify src/app.jsx -o build/bundle.js
SyntaxError: /Users/horowitz/dev/poochie/src/app.jsx: Unexpected token (9:2)
   7 |
   8 | React.render(
>  9 |   <Container />,
     |   ^
  10 |   document.getElementById('container')
  11 | );
  12 |

SyntaxError になってしまう。

方法

２つほど。

1. babelify の version 6.4.0 に戻す

戻すと上手く動いた。
世の中に出回ってる記事のサンプルも動く。

2. presets を指定する

要は追加のオプションを付ける必要があるとのこと。

コマンドラインから実行する場合は、以下のような感じ

npm install --save-dev babel-preset-react
echo '{"presets":["react"]}' > .babelrc
browserify -t babelify src/app.jsx -o build/bundle.js

gulp の場合は configure から presets を渡す

     debug: true
   })
-    .transform(babelify)
+    .transform(babelify.configure({
+      presets: ["react"]
+    }))
     .bundle()
     .pipe(source('bundle.js'))
     .pipe(gulp.dest('build'));

関係ないけど es6 でコードを書いた場合は、babel-preset-es2015 の install と presets: ["es2015"] の指定が必要になるみたい。

まとめ

js 初学者にはキツイお仕置きでした。
babelify7 から babel6 を内部で使っていて、babel6 から新しく option 付ける必要があるらしい、という雑な理解をしています。

参考