node 4.0以上出たけど、gulpfile.babel.jsの書き方って何か変わるの？

17545 ワード
JavaScript es2015 gulp Node.js babel JavaScript テキストリンク

まずは普通に試してみた結果

そういえば Node.js ~> 4.0.0 が出てから何もしてねーな、と思って軽くこっちの記事を参考にしながらやってみようとしてみたけど、10分ほどハマった感じだったので記事化しとこうと思った

単純に下記のような書き方をしたらとりあえず動くのかな、って思って試してみたけど、当然これだと動きません

import gulp from 'gulp'
import gulpWebserver from 'gulp-webserver'

gulp.task('serve', () =>
  gulp.src('./')
    .pipe(
      gulpWebserver({
        livereload: true,
        port: 8001,
        fallback: 'index.html',
        open: true
      })
    );
);

gulp.task('default', ['serve'])

まず普通のNode.jsだと import 文が解釈できません
なので、認識させる為にはES2015の文法を gulp が知っておく必要があります

しかし、中途半端に情報を入れていた私は gulpfile.babel.js を用意すれば普通にいけるんじゃないの？と勘違いしていました

最近だと babel-core がバージョン変わったらしく、 6.0.2 が出ていました
それに伴い babel のバージョンも 6 になったらしいのですが、普通にこれだとプリセットが足らずに怒られます

ただしエラーからはその内容が汲み取れません

(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at Object.Module._extensions..js (module.js:432:10)

そのことで issue に書いている人もいますね
（バッサリとウチの問題じゃなくて、「babelの問題だ」って返答してますね）

その結果、こっちの記事に誘導されます
さて、その結果わかったことは
npm i --save-dev babel-preset-es2015
こうしろと書かれていますね

babel-preset-es2015 が終わったあと

installしたあとにもう一回動かしてみると

(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)

まだ怒られます
まだ理解できないようです

そして先ほどの記事には .babelrc に

{
  "presets": ["es2015"]
}

な内容を書け、と書いてあります
なので、従います

最終的なファイル構成はこうなりました

-rw-r--r--    1 l-03-003  staff    150 11  6 11:54 index.html
drwxr-xr-x    3 l-03-003  staff    102 11  6 11:58 ..
-rw-r--r--    1 l-03-003  staff    402 11  6 12:13 package.json
drwxr-xr-x  295 l-03-003  staff  10030 11  6 12:13 node_modules
-rw-r--r--    1 l-03-003  staff    291 11  6 12:51 gulpfile.babel.js
drwxr-xr-x    7 l-03-003  staff    238 11  6 12:54 .
-rw-r--r--    1 l-03-003  staff     28 11  6 12:54 .babelrc

presetも用意した、設定ファイルも書いた、あとは

[12:27:33] Requiring external module babel-core/register




/Users/l-03-003/Developments/js/gist/test-babel/node_modules/babel-core/lib/transformation/file/index.js:546
      throw err;
      ^

SyntaxError: /Users/l-03-003/Developments/js/gist/test-babel/gulpfile.babel.js: Unexpected token (13:5)
  11 |     //    open: true
  12 |     //  })
> 13 |     );
     |      ^
  14 | );
  15 |
  16 | gulp.task('default', ['serve'])

おお、動いた！
しかしエラーが出てる箇所がよく分からないってなりますよね（少なくとも自分はそうなった）

import gulp from 'gulp'
import gulpWebserver from 'gulp-webserver'

gulp.task('serve', () =>
  gulp.src('./')
    .pipe(
      gulpWebserver({
        livereload: true,
        port: 8001,
        fallback: 'index.html',
        open: true
      })
    ); <- ここで問題が起きている
);

gulp.task('default', ['serve'])

原因は掴めていないのですが、この場所の ; が問題なようです
消すと普通に動きました
（ ; ってどこまでサポートしてくれてるのかな）

$ ./node_modules/.bin/gulp
[12:28:44] Requiring external module babel-core/register
[12:28:44] Using gulpfile ~/Developments/js/gist/test-babel/gulpfile.babel.js
[12:28:44] Starting 'serve'...
[12:28:44] Webserver started at http://localhost:8001
[12:28:44] Finished 'serve' after 44 ms
[12:28:44] Starting 'default'...
[12:28:44] Finished 'default' after 14 μs

これでまた、自由に開発できますね