ES6个人学习整理（一）——编译环境搭建

ES6编译环境搭建

经过测试，整理出一套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
            }
        }]
  }
}