使用babel编译es6

 

一.直接使用命令编译

 

node命令：

 

$ sudo npm install babel -g          #全局安装
$ babel demo.js -o demo-compile.js   #编译并产出

 

 

二.结合gulp编译

1.需要先安装gulp,gulp-babel

 

$ npm install --save-dev gulp-babel

 2.然后新建gulpfile.js

 

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

    // Use gulp-sourcemaps like this:

 

var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

 以下模块选装

 

 

npm install babel-preset-es2015 --save-dev

3.在根目录新建.babelrc文件，命令如下：

 

echo '{ "presets": ["es2015"] }' > .babelrc

 

 

三，结合webpack使用

1.安装loader模块

 

$ npm install --save-dev babel-loader babel-core

2.在根目录新建webpack.config.js文件

 

var webpack = require('webpack');  
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');  
   
module.exports = {  
    //插件项  
    plugins: [commonsPlugin],  
    //页面入口文件配置  
    entry: {  
        index : './src/js/page/index.js'  
	},  
	//入口文件输出配置  
	output: {  
	    path: 'dist/js/page',  
	    filename: '[name].js'  
	},  
	module: {  
	    //加载器配置  
	        loaders: [
	            //.css 文件使用 style-loader 和 css-loader 来处理
	            { test: /\.css$/, loader: 'style-loader!css-loader' },
	            //.js 文件使用 jsx-loader 来编译处理
	            { test: /\.js$/, loader: 'jsx-loader?harmony!babel-loader' },
	            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
	            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
	            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
	            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
	        ]
	},  
	//其它解决方案配置  
	resolve: {  
	    //查找module的话从这里开始查找  
	        root: 'E:/github/flux-example/src', //绝对路径
	        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
	        extensions: ['', '.js', '.json', '.scss'],
	        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
	        alias: {
	            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
	            ActionType : 'js/actions/ActionType.js',
	            AppAction : 'js/actions/AppAction.js'
	        }
    }
}  

 如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。

注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。

拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

npm install url-loader -save-dev

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。

 

 

webpack 的执行也很简单，直接执行

$ webpack --display-error-details

即可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。

其他主要的参数有：

 

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包
 
$ webpack --watch   //监听变动并自动打包
 
$ webpack -p    //压缩混淆脚本，这个非常非常重要！
 
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

 

 

其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。