babel | hirokonaBlog

webpackの導入とエラーたち

基本＆jsバンドル編

npm i -D webpack webpack-cli

browserSyncみたいな機能を入れる
npm i -D webpack webpack-cli webpack-dev-server

babel入れる
npm install -D webpack webpack-cli babel-core babel-loader babel-preset-env

jquery入れる
npm install -S jquery

vue入れる
npm i -S vue

babel-polyfill入れる
npm install -D webpack webpack-cli babel-core babel-loader babel-preset-env babel-polyfill

sass編

css扱う用プラグイン入れる
npm i -D webpack webpack-cli style-loader css-loader

sass扱う用プラグイン入れる
npm i -D webpack webpack-cli sass-loader node-sass style-loader css-loader

css分離用プラグイン入れる
npm i -D webpack webpack-cli css-loader node-sass sass-loader extract-text-webpack-plugin@next

prefix用のプラグイン入れる
npm i -D webpack webpack-cli style-loader css-loader sass-loader node-sass postcss-loader autoprefixer

ちなみに途中でsudo入れるの面倒だったので権限変えた
osxのnpm installをsudo無しで行えるようにする – Qiita
https://qiita.com/Sugima/items/ef2848b248e898a47504

便利。

gulpでちょっとバベって見ようと思ったらコケた

世界は回り続けるのです

そろそろesで書くかとbabel入れたら、変換がうまく行かなかった。

gulp + Babelの環境をつくる

ES6 で書く環境を作る（gulp + Babel 編） – Qiita
https://qiita.com/hkusu/items/9b312274b3ff2913e15b
↑記を参考に

$ npm install --save-dev gulp-babel

してgulpfile.jsで処理を通しても変換されず・・・なぜ、とおもっていたら

javascript – babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう – スタック・オーバーフロー
https://ja.stackoverflow.com/questions/31664/babel%E3%81%A7%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%AB%E3%82%92%E3%81%97%E3%81%A6%E3%82%82%E5%85%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%81%BB%E3%81%BC%E5%90%8C%E3%81%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86

readmeをよんでねって。
https://www.npmjs.com/package/gulp-babel

インストールもいっこ必要やった。

$ npm install --save-dev gulp-babel babel-preset-env

そしてgulpfile.jsで指定するpresetsの値が変わっていた

presets: ['env']

結局こうなった

/**
 * babel:test
 */
$.gulp.task('babel', function() {
        console.log('babelchange watched');
  $.gulp.src(PATH.develop + 'assets/es6/**/*.js')
    .pipe($.babel({
      presets: ['env']
    }))
    .pipe($.gulp.dest(PATH.develop + 'assets/js/'));
        console.log('babel');
});

とりあえずとおった。