ES6编译环境搭建
经过测试,整理出一套ES6编译成ES5的环境.
目录结构
整个目录结构如下:
--ES6
--.git
--dest
--node_modules
--scripts
--sourcemaps
.gitignore
gulpfile.js
index.html
LICENE
package.json
README.md
webpack.config.js
工具
{
"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
}
}]
}
}