react-js开辟环境

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

最先一个项目

npm init

装置webpack

npm install webpack --save-dev

项目目次(demo架构)

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

设置webpack.config.js

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();

运用webpack-dev-server：监听代码自动革新！

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 / babel

//装置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 <div>Helllo World</div>
    }
}

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

到场CSS ／ iamge / font

// 这里先留个坑！由于临时来讲照样以为外链出来合适如今这个时期。可能在项目正式上线的时刻才须要

宣布设置：单文件进口版本！

//新建一个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的课程了！本课程假如另有什么不懂的话，能够在批评中举行议论。