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 檔案,儲存,可看到頁面實現自動重新整理。
歡迎指正,互相進步~