使用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(主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大)。

相关推荐