Webpack使用教程五（Babel）

Babel是一個JavaScript編譯和工具平臺，使用Babel咱們能夠：使用新版本的JavaScript（ES6/ES2015，ES7/ES2016），儘管有些瀏覽器不能所有支持新特性；使用JavaScript語言擴展，例如React JSX。Babel是一個獨立的工具，能夠與Webpack一塊兒使用。Babel已經模塊化並分佈在不一樣的npm模塊中，其中核心的功能能夠在babel-core模塊中得到。其餘的部分根據用戶的需求來下載：若是想與webpack一塊兒使用，須要安裝babel-loader模塊；若是想使用ES6特性，須要安裝babel-preset-2015；若是想使用React JSX，那麼須要安裝babel-preset-react。固然還有一些其餘的配置模塊，這裏並無所有列出。接下來咱們看一個簡單的React例子（源碼下載）。

一、安裝必須的npm模塊

安裝babel
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react

安裝react
npm install react react-dom

安裝json loader
npm install json-loader

二、代碼文件

//Greeter.js
import React, {Component} from 'react'
import config from './config.json'

class Greeter extends Component {
    render() {
        return (
            <div>{config.greetText}</div>
        );
    }
}

export default Greeter

//main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

三、設置webpack文件

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] },
    devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
    }
};

運行webpack命令，而後打開index.html文件就能夠了。源碼下載。