react基于webpack和Babel 6上的开发环境搭建

摘要：可能在项目正式上线的时候才需要发布配置单文件入口版本新建一个和开发环境不同的是，入口和出口。相应的在的源也要进行修改。加载模块发布配置多文件模式库最好就不要打包进来。因为一般库都是不会改动的。所以这里就要进行库的分离。

时间：2016.3.19-12:29
作者：三月懒驴
基于：react版本：0.14
基于：babel版本：6
相关代码：github

npm init

npm install webpack --save-dev

    - /app
        - main.js
        - component.js
    - /build
        - bundle.js （自动生成）
        - index.html
    - webpack.config.js
    - package.json

var path = require("path");
module.exports = {
    entry:path.resolve(__dirname,"app/main.js"),
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"bundle.js"
    }
};

在package.json里面预设这个命令去启动打包功能

"build":"webpack"

//component.js
"use strict"
module.exports = function(){
    var a = "hello word"
    return a;
}

//main.js
"use strict"
var component = require("./component.js");
document.body.innnerHTML = component();

npm install webpack-dev-server --save-dev

在package.json里面配置webpack-dev-server

"dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
//webpack-dev-server 创建一个服务器8080端口的
//devtool eval --为你的代码创建源地址，可以代码快速定位
//progress --显示进度条
//colors --命令行带颜色
//content-base build --指向设置的输出目录
//一旦启动这个就会用服务器去监听代码文件的变化，从而每次变化都自动合并

启动自动刷新功能

//配置在webpack.config.js的入口
entry:[
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    path.resolve(__dirname,"app/main.js");
]

1. npm run dev 启动服务器
2. 打开浏览器－>http://localhost:8080
3. 修改一下前面的课堂练习时候写的代码中的compnent.js的return的东西

//安装react
npm install react --save
npm install react-dom --save
//安装babel-loader
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev  //支持ES2015
npm install babel-preset-react --save-dev //支持jsx
npm install babel-preset-stage-0 --save-dev //支持ES7
//但是还不够
npm install babel-polyfill --save
/*
Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)
*/
npm install babel-runtime  --save
npm install babel-plugin-transform-runtime --save-dev
/*减少打包的时候重复代码，以上要注意是放在dev还是非dev上！*/

配置babel

//在入口添加polyfill
entry[
    "babel-polyfill",
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    path.resolve(__dirname,"app/main.js")
]
//在webpack.config.js的module.exports = {}里面增加
module:{
    loaders:[{
        "loader":"babel-loader",
        exclude:[
            //在node_modules的文件不被babel理会
            path.resolve(__dirname,"node_modules"),
        ]，
        include:[
            //指定app这个文件里面的采用babel
            path.resolve(__dirname,"app"),
        ],
        test：/.jsx?$/,
        query:{
            plugins:["transform-runtime"],
            presets:["es2015","stage-0","react"]
        }
    }]
}

//component.js
"use strict"
import React from "react"
class Component extends React.Component{
    render(){
        return 
Helllo World
    }
}

//main.js
"use strict"
//注意！这里引入了新的东西
import "babel-polyfill"
import React from "react"
import {render} from "react-dom"
import Component from "./component"
let main = function(){
    render(,document.getElementById("main"));
}
main();

// 这里先留个坑！因为暂时来说还是认为外链出来适合现在这个时代。可能在项目正式上线的时候才需要

//新建一个webpack.production.config.js
//in package.json
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
//in webpack.production.config.js
//和开发环境不同的是，入口和出口。相应的在HTML的JS源也要进行修改。
var path = require("path")
var node_module_dir = path.resolve(__dirname,"node_module");
module.exports = {
    entry:[
        "babel-polyfill",
        path.resolve(__dirname,"app/main.js"),
    ],
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"app.js"
    },
    module:{
        loaders:[
            {
                loader:"babel-loader",   //加载babel模块
                include:[
                    path.resolve(__dirname,"app"),
                ],
                exclude:[
                    node_module_dir
                ],
                test:/.jsx?$/,
                query:{
                    plugins:["transform-runtime"],
                    presets:["es2015","stage-0","react"]
                }
            },
        ]
    }
}

库最好就不要打包进来。因为一般库都是不会改动的。所有用户load一次就好了。所以这里就要进行库的分离。
依旧是：webpack.production.config.js

var path = require("path");
var webpack = require("webpack");
var node_module_dir = path.resolve(__dirname,"node_module");

module.exports = {
    entry:{
        app:[path.resolve(__dirname,"app/main.js"),],
        react: ["babel-polyfill","react","react-dom"]
    },
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"app.js"
    },
    module:{
        loaders:[
            {
                loader:"babel-loader",   //加载babel模块
                include:[
                    path.resolve(__dirname,"app"),
                ],
                exclude:[
                    node_module_dir
                ],
                test:/.jsx?$/,
                query:{
                    plugins:["transform-runtime"],
                    presets:["es2015","stage-0","react"]
                }
            },
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("react", "react.js")
      ]
}

预计学习搭建时间：1小时！
恭喜你！全部课程完成，接下来的话，我们就要开始react的课程了！本课程如果还有什么不懂的话，可以在评论中进行讨论。