react-js開發(fā)環(huán)境

時間：2016.3.19-12:29
作者：三月懶驢
基于：react版本：0.14
基于：babel版本：6

1. 開始一個項目

npm init

2. 安裝webpack

npm install webpack --save-dev

3. 項目目錄(demo架構)
   • /app
     • main.js
     • component.js
   • /build
     • bundle.js （自動生成）
     • index.html
   • webpack.config.js
   • package.json
4. 設置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'
    }
};

5. 在package.json里面預設這個命令去啟動打包功能

"build":"webpack"

6. －－－－課間練習－－－

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

//main.js
'use strict'
var component = require('./component.js');
document.body.innerHTML = component();

7. 使用webpack-dev-server：監(jiān)聽代碼自動刷新！

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

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

"dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
//webpack-dev-server 創(chuàng)建一個服務器8080端口的
//devtool eval --為你的代碼創(chuàng)建源地址，可以代碼快速定位
//progress --顯示進度條
//colors --命令行帶顏色
//content-base build --指向設置的輸出目錄
//一旦啟動這個就會用服務器去監(jiān)聽代碼文件的變化，從而每次變化都自動合并

9. 啟動自動刷新功能

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

10. －－－－課堂練習－－－

    1. npm run dev 啟動服務器
    2. 打開瀏覽器－>http://localhost:8080
    3. 修改一下6的時候?qū)懙拇a中的compnent.js的return的東西

11. 重點：配置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是一個英國產(chǎn)品,在美國稱之為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']
        }
    }]
}

12. －－課堂測試－－

//component.js
'use strict'
import React from 'react'
class Component extends React.Component{
    render(){
        return <div>Helllo World</div>
    }
}
module.exports = Component

//main.js
'use strict'
import React from 'react'
import {render} from 'react-dom'
import Component from './component'
let main = function(){
    render(<Component />,document.getElementById('main'));
}
main();

13. 加入CSS ／ iamge / font

// 這里先留個坑！因為暫時來說還是認為外鏈出來適合現(xiàn)在這個時代。可能在項目正式上線的時候才需要

14. 發(fā)布配置：單文件入口版本！

//新建一個webpack.production.config.js
//in package.json
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
//in webpack.production.config.js
//和開發(fā)環(huán)境不同的是，入口和出口。相應的在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']
                }
            },
        ]
    }
}

15. 發(fā)布配置（多文件模式）
    庫最好就不要打包進來。因為一般庫都是不會改動的。所有用戶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的課程了！本課程如果還有什么不懂的話，可以在評論中進行討論。