webstorm+react+webpack-demo

標籤：命令   rom   目錄   頁面   例子   rect   檔案名稱   javascrip   core   

序言：通過這個小例子你也許、大概、可能會掌握以下幾點

1、webstorm如何使用命令列

2、如何使用webpack的loaders把json格式的檔案轉化為javascript檔案

3、如何使用不同的loaders把es6轉換為瀏覽器可以識別的javascript檔案

4、對於react而言如何使用合適的loaders把react的JSX檔案轉換為javascript檔案

5、webpack的伺服器啟動後如何自動監聽改動的檔案以及瀏覽器如何自動重新整理。

準備：安裝好webstorm和nodejs

開始：

1、建立一個project檔案夾為項目根目錄，下面2個子檔案夾分別是src和public，public目錄下一個index.html。如

(註：html內引入的bundle.js是webpack最終編譯後自動產生的檔案，暫時不必理會)

2、在src下面建立一個message.json檔案，輸入以下內容

{  "name":"Life",  "do":"is a",  "what":"gradient"}

該檔案是給webpack編譯並有react渲染到html內的具體內容。

3、在src下面建立一個createdom.js輸入以下代碼，是基於react建立DOM並擷取message.json內的資訊javascript檔案

/** * Created by Administrator on 2016/11/11. *///6--------es6寫法，最後由webpack來編譯--------------import React,{Component} from ‘react‘;//引入react和組件import config from ‘./message.json‘;//引入message.jsonclass Greeter extends Component{    render(){        return(            <h1>                <span>{config.name}</span>                <span>{config.will}</span>                <span>{config.what}</span>            </h1>        );    }}export default Greeter//匯出組件Greeter

4、在src下面床架一個entry.js輸入以下代碼(也是webpack的入口檔案！！)

/** * Created by Administrator on 2016/11/11. *///6、編譯es6由webpack最後的配置來編譯import React from ‘react‘;//引入reactimport {render} from ‘react-dom‘;//引入react-dom的render方法import Greeter from ‘./createdom‘;//從createdom.js引入Greeter組件import ‘./main.css‘;//匯入css檔案，最後由css-loader來處理該模組render(<Greeter />,document.getElementById(‘app‘));//把Greeter組件掛載到id為app的div內

5、建立package.json檔案，並安裝所有需要的依賴包(npm太慢，這裡使用cnpm)，在webstorm內使用命令列

a:點擊webstorm左下角的 Terminal 按鈕彈出內建命令列，進入project根目錄，如

b:輸入命令 cnpm init ,快速建立一個package.json檔案(如果你的所有依賴包安裝成功該檔案內都會提示)

等待package.json檔案自動產生後再往下繼續。

c:輸入命令：cnpm install --save-dev webpack，安裝webpack依賴包，

此時project目錄下回自動產生一個node_modules檔案夾，該檔案有點大，webstorm會自動載入耗費時間，建議：右擊node_modules檔案夾》Mark Directory As》Excluded

6、在project根目錄建立一個webpack.config.js檔案輸入以下代碼，這也是weback預設的設定檔(屬於重要角色)

/** * Created by Administrator on 2016/11/10. */var webpack = require(‘webpack‘);module.exports = {    //2、進出口檔案配置    entry:__dirname+‘/app/main.js‘,//指定的入口檔案,“__dirname”是node.js中的一個全域變數，它指向當前執行指令碼所在的目錄    output: {//輸出        path: __dirname+‘/public‘,//輸出路徑        filename: ‘bundle.js‘//輸出檔案名    },    module: {//在設定檔裡添加JSON loader        loaders: [            {                test: /\.json$/,                loader: "json"            },            {//6、編譯es6配置                test:/\.js$/,                exclude:/node_modules/,                loader:‘babel‘,//在webpack的module部分的loaders裡進行配置即可                query:{                    presets:[‘es2015‘,‘react‘]                }            },            {//3、CSS-loader                test:/\.css$/,                loader:‘style!css‘//添加對樣式表的處理            }        ]    },    //4、伺服器依賴包配置    devServer: {        contentBase: "./public",//本機伺服器所載入的頁面所在的目錄        colors: true,//終端中輸出結果為彩色        historyApiFallback: true,//不跳轉        inline: true//即時重新整理    }}

該配置中用到了幾個loader，Loaders是webpack中最讓人激動人心的功能之一了。通過使用不同的loader，webpack通過調用外部的指令碼或工具可以對各種各樣的格式的檔案進行處理，比如說分析JSON檔案並把它轉換為JavaScript檔案，或者說把下一代的JS檔案（ES6，ES7)轉換為現代瀏覽器可以識別的JS檔案。或者說對React的開發而言，合適的Loaders可以把React的JSX檔案轉換為JS檔案。

繼續webstorm的命令列分別安裝：cnpm install --save-dev css-loader、style-loader、json-loader、babel-core、babel-loader、babel-preset-es2015、babel-preset-react、webpack-dev-server依賴包，並cnpm install --save react和react-dom

a:cnpm install --save-dev css-loader

b:cnpm install --save-dev style-loader

c:cnpm install --save-dev json-loader

d:cnpm install --save-dev babel-core

 

e:cnpm install --save-dev babel-loader

f:cnpm install --save-dev babel--preset-es2015

g:cnpm install --save-dev babel-preset-react

h:cnpm install --save-dev webpack-dev-server

i:cnpm install --save- react

j:cnpm install --save- react-dom

上面都安裝成功後你的package.json裡會多出如下內容

 

webstorm+react+webpack-demo