ES 6個人学習整理(一)——コンパイル環境構築

ES 6コンパイル環境構築

 ， ES6 ES5 .

ディレクトリ構造

 ：

--ES6
    --.git
    --dest
    --node_modules
    --scripts
    --sourcemaps
    .gitignore
    gulpfile.js
    index.html
    LICENE
    package.json
    README.md
    webpack.config.js

ツール

// babel-runtime babel-plugin-transform-runtime webpack loader 
{
  "babel-core": "^6.3.17",
  "babel-loader": "^6.2.0",
  "babel-preset-es2015": "^6.3.13",
  "babel-runtime": "^6.3.19",
  "babel-plugin-transform-runtime": "^6.3.13",
  "gulp": "^3.9.0",
  "gulp-watch": "^4.3.5",
  "gulp-webpack": "^1.5.0",
  "webpack": "^1.12.9"
}

gulp

 ， nodejs。 gulpfile.js

const gulp = require('gulp')
const watch = require('gulp-watch')
const browserSync = require('browser-sync')
const webpack = require('gulp-webpack')

gulp.task('babel', () => {
  return gulp.src('./scripts/*.js')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('./dest'))
})

gulp.task('watch', () => {
  browserSync.init({
    server: {
      baseDir: './'
    }
  })
  watch('./scripts/*', () => {
    gulp.start('babel')
  })
  watch('./dest/*', () => {
    browserSync.reload()
  })
})

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

gulp-watch

 gulp watch 

gulp-webpack

 ， webpack js， webpack gulp 

webpack

 js ， sourcemaps
package.json babel-core,babel-loader babel-preset-es2015 webpack es6 
 ：

var webpack = require('webpack');
module.exports = {
    'entry': {
        'app': './scripts/export.js'
    },
    'output': {
        'filename': '[name].min.js',
        'sourceMap': true,
        'sourceMapFilename': '../sourcemaps/[name].min.js.map'
    },
    'devtool': 'source-map',
    'plugins': [
        new webpack.optimize.UglifyJsPlugin({
            'compress': {
                'warnings': false
            }
        })
    ],
    'module' : {
        'loaders': [{
            'test': /\.js$/,
            'exclude': /node_modules/,
            'loader': 'babel',
            'query': {
                'presets': ['es2015']
                'plugins': ['transform-runtime'],
                'cacheDirectory': true
            }
        }]
  }
}