node 4.0 이상 나왔지만, gulpfile.babel.js를 쓰는 법은 무엇인가 바뀌는 거야?

우선은 보통으로 시도한 결과

그러고 보니 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

프리셋도 준비한 설정 파일도 썼다.

[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

이제 다시 자유롭게 개발할 수 있습니다