React：基礎專案搭建
近期在用React相關技術編寫一個簡單的會議室預定系統，將基礎的專案搭建部分整理出來，分享一下。
程式設計工具：Webstorm（jetbrains公司旗下的一款JavaScript開發工具，素有“Web前端開發神器”、“最強大的的HTML5編輯器”等稱號，個人覺得開發工具沒強制要求，用習慣了就好）
基礎技術：Node.js，Webpack，React，Babel，Webpack-dev-server
專案搭建
1、安裝node.js和npm
2、新建專案
（1）新建一個專案，命名為ConferOrder（會議室預定）
（2）新建開發目錄，命名為src，
新建元件目錄，Components，用來放React元件
（3）新建輸出目錄。命名為build
build,js是webpack打包後自動生成的供瀏覽器解析的js檔案，不需要新建；
index.html是最終要呈現的頁面檔案（可以手動建立，也可以根據模板進行相關配置生成），此處手動建立，程式碼如下：
<html lang="en"> <head> <meta charset="UTF-8"> <title>ConferOrder</title> </head> <body> <!--要插入React元件的位置--> <div id="content"></div> <!--引入bundle.js--> <script src="bundle.js"></script> </body> </html>
3、建立package.json檔案
package.json是一個標準的npm說明檔案，包含了當前專案的依賴模組，自定義的指令碼任務等。
開啟控制檯，進入專案根目錄，輸入 npm init 自動建立package.json
輸入命令後，終端會出現一系列問題，預設回車就可以，確認後輸入yes，即可看到package.json建立完成。
4、安裝webpack
在本專案中安裝webpack，命令列輸入：npm install --save-dev webpack
其中的 --save-dev 是將依賴寫入專案的package.json檔案中的 “devDependencies"（只會在開發環境下依賴的模組）；
--save 是將依賴寫入專案的package.json檔案中的 "dependencies"（不僅開發環境可以使用，生產環境也能使用）。
（1）建立webpack.config.js
webpack.config.js是webpack的配置檔案，在根目錄下新建webpack.config.js檔案，程式碼如下：
//__dirname是node.js中的一個全域性變數，它指向當前執行指令碼所在的目錄
module.exports = {//注意這裡是exports不是export
entry: __dirname + "/app/main.js",//唯一入口檔案，就像Java中的main方法
output: {//輸出目錄
path: __dirname + "/build",//打包後的js檔案存放的地方
filename: "bundle.js"//打包後的js檔名
}
};
（2）使用Source Maps，使除錯更容易
Webpack可以在打包時為我們生成source maps，這為我們提供了一種對應編譯檔案和原始檔的方法，使得編譯後的程式碼可讀性更高，也更容易除錯。
在webpack中配置source maps，需要配置devtool，它有四種不同的配置選項，此處對四種配置的區別不再贅述，開發環境下選擇eval-source-map，配置如下：
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',//生成Source Maps,這裡選擇eval-source-map
entry: __dirname + '/app/main.js',//唯一入口檔案,__dirname是node.js中的一個全域性變數，它指向當前執行指令碼所在的目錄
output: {//輸出目錄
path: __dirname + '/build',//打包後的js檔案存放的地方
filename: 'bundle.js'//打包後輸出的js的檔名
}
};
5、安裝React
在終端輸入 ，同時安裝React 和 React-DOM：npm install --save-dev react react-dom
6、安裝Babel
Babel是一個編譯JavaScript的平臺，可以通過Babel編譯實現：
- 下一代的JavaScript標準（ES6，ES7），這些標準目前並未被當前的瀏覽器完全支援
- 使用基於JavaScript進行了拓展的語言，比如React的JSX
Babel的核心功能位於babel-core的npm包中，對於不能的功能或拓展，需要單獨安裝不同的包，比如用的最多的是用於解析ES6的babel-es2015和解析HSX的babel-present-react
用npm一次性安裝依賴包：npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack.config.js中進行配置
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',//生成Source Maps,這裡選擇eval-source-map
entry: __dirname + "/app/main.js",//唯一入口檔案
output: {//輸出目錄
path: __dirname + "/build",//打包後的js檔案存放的地方
filename: "bundle.js"//打包後輸出的js的檔名
},
module: {
//載入器
rules: [
{
test: /\.(js|jsx)$/,//一個匹配loaders所處理的檔案的拓展名的正則表示式，這裡用來匹配js和jsx檔案（必須）
exclude: /node_modules/,//遮蔽不需要處理的檔案（資料夾）（可選）
loader: 'babel-loader',//loader的名稱（必須）
query: {
presets: ['es2015', 'react','stage-0']
}
}
]
},
};
在根目錄下新建.babelrc
//.babelrc
{
"presets": [
"react",
"es2015",
"stage-0"
]
}
7、啟動專案
（1）在src>components目錄下新建檔案ComponentTest.jsx，用ES6語法寫一個簡單的元件（元件的命名首字母需大寫，否則會報錯）
//ComponentTest.jsx
import React from 'react';
class ComponentTest extends React.Component {
render() {
return (
<div>Hello World!</div>
)
}
}
//匯出元件
export default ComponentTest;
（2）在main.js中使用ES6語法，定義和渲染ComponentTest模組，將React元件渲染至html標籤中
//main.js
import React from 'react';
import ReactDom from 'react-dom';
import ComponentTest from './components/ComponentTest.jsx';
ReactDom.render(
<ComponentTest />,
document.getElementById('content')
);
注：Webstorm會對ES6語法報錯，解決方式：File -> Settings -> Languages&Frameworks -> JavaScript，將JavaScript language version改為ECMAScript6
（3）修改package.json
//package.json
{
"name": "ConferOrder",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --mode development"
},
"author": "jieer302",
"license": "ISC",
"devDependencies": {
"webpack": "^1.13.2"
}
}
（4）控制檯啟動
根目錄下輸入 npm start ，顯示啟動成功後，在webstorm中預覽index.html可看到顯示Hello Word的頁面
8、安裝webpack-dev-server，實現自動重新整理
webpack提供一個可選的本地開發伺服器，該伺服器基於node.js構建，可是讓瀏覽器檢測程式碼的修改，自動重新整理修改後的結果
（1）在終端輸入以下程式碼，安裝webpack-dev-server
npm install --save-dev webpack-dev-server
（2）安裝react-transform-hrm
npm install --save-dev babel-plugin-react-transform react-transform-hmr
（3）在webpack.config.js中配置webpack-dev-server，需要修改entry的路徑，如下：
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',//生成Source Maps,這裡選擇eval-source-map
entry: ['webpack/hot/dev-server', __dirname + '/src/main.js'],//唯一入口檔案
output: {//輸出目錄
path: __dirname + "/build",//打包後的js檔案存放的地方
filename: "bundle.js"//打包後輸出的js的檔名
},
module: {
//載入器
rules: [
{
test: /\.(js|jsx)$/,//一個匹配loaders所處理的檔案的拓展名的正則表示式，這裡用來匹配js和jsx檔案（必須）
exclude: /node_modules/,//遮蔽不需要處理的檔案（資料夾）（可選）
loader: 'babel-loader',//loader的名稱（必須）
query: {
presets: ['es2015', 'react','stage-0']
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()//熱模組替換外掛
],
//webpack-dev-server配置
devServer: {
contentBase: './build',//預設webpack-dev-server會為根資料夾提供本地伺服器，如果想為另外一個目錄下的檔案提供本地伺服器，應該在這裡設定其所在目錄
historyApiFallback: true,//在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true,//設定為true，當原始檔改變時會自動重新整理頁面
port: 8080,//設定預設監聽埠，如果省略，預設為"8080"
},
};
在package.json中配置啟動webpack-dev-server
//package.json，注意：在實際使用過程中package.json不能有任何註釋
{
...
"scripts": {
"start": "webpack --mode development",
"dev": "webpack-dev-server --mode development",
},
...
}
修改.babelrc配置
//.babelrc
{
"presets": [
"react",
"es2015"
],
"env": {
"development": {
"plugins": [
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
}
]
}
]
]
}
}
}
（4）終端啟動
終端輸入 npm run dev，控制檯出現啟動成功的標示後，瀏覽器開啟：http://localhost:8080，開啟頁面。
此時，修改 Components.jsx 檔案，儲存，可看到頁面實現自動重新整理。
歡迎指正，互相進步~