使用 es6 来编写 react.js , 用 webapck 结合 babel 去编译 es6 与 jsx,然后打包

安装 babel 环境

// 本地环境依赖
npm install babel --save

// babel 命令行工具
npm install babel-cli --save

// 使用 babel 进行代码 api 转码编译
npm install babel-core --save
// 模块加载
npm install babel-loader --save
npm install babel-plugin-add-module-exports --save

// 代码填充,让不支持的运行环境可以使用高级语法
npm install babel-polyfill --save

// 把 es6 的代码编译为 es5, 因为很多 es6 的语法 在浏览器上无法运行
npm install babel-preset-es2015 --save
npm install babel-plugin-transform-es2015-classes --save

// 解析 react jsx 语法, 把 jsx 编译为 js
npm install babel-preset-react --save

// 预设 es6 的那个版本
npm install babel-preset-stage-2 --save

// 在 babel 称为助手,yige 运行时环境,自动去加载需要依赖的模块
npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save

配置 babel 环境

在项目根目录下创建 .babelrc 文件,此文件是描述 babel 如何编译 js 代码的

{
    "presets": [
        "es2015",
        "react",
        "stage-2"
    ],
    "plugins": [
        "add-module-exports",
        "transform-runtime",
        "transform-es2015-classes"
    ]
}

安装 react 环境

// 安装 react 模块
npm install react --save

// react 虚拟 dom
npm install react-dom --save

安装 webpack 环境

// 本地 webpack 环境
npm install webpack --save

// 监听文件是否发生变化 配合 webpack --watch
npm install chokidar --save

webpack 配置

var path = require("path");
var fs = require("fs");
var webpack = require("webpack");
var staticRoot = path.resolve(__dirname, "./react");
var outputPath = path.resolve(__dirname, "./build");
var babelrc = JSON.parse(
    fs.readFileSync(path.resolve(__dirname, "./.babelrc"), 'utf8')
);
module.exports = {
    entry: {
        //入口文件
        // key 为输出时的名字
        // value 时本地物理文件
        app: staticRoot + '/client.jsx' //需要打包的文件
    },
    output: {
        path: outputPath, //输出目录
        publicPath: staticRoot,        //引用目录  本地物理路径
        filename: '[name].build.js',   //输出名称
        sourceMapFilename: '[file].map'  //Source Map
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,        //检测以什么结尾的文件
                exclude: /node_modules/,  //排除某文件夹
                loader: ['babel'],        //使用什么模块来编译
                //配置
                query: babelrc
            }
        ]
    },
    //配合模块使用
    resolve: {
        //注意:配置的路径必须是绝对路径
        root: [ staticRoot ],
        //配置别名
        alias: [],
        //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.jsx'],
    },
    plugins: [
        //提前加载模块
        //在使用中可以不在使用 var xxx = require("xxxx");
        new webpack.ProvidePlugin({
            'React': 'react',
            'ReactDOM': 'react-dom',
        })
    ]
};