使用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（主要是樣式這塊一句就獨佔一行腳本，致使未壓縮腳本變得很大）。