React提供了create-react-app的快速構(gòu)建工具, 但作為一個(gè)專(zhuān)業(yè)的程序員(老司機(jī)), 面對(duì)復(fù)雜的項(xiàng)目, 入門(mén)級(jí)的構(gòu)建工具, 是遠(yuǎn)遠(yuǎn)不夠的, 我們這里從零開(kāi)始, 用webpack, 手動(dòng)配置一個(gè)獨(dú)立的React開(kāi)發(fā)環(huán)境, 開(kāi)發(fā)環(huán)境完成后, 支持自動(dòng)構(gòu)建, 自動(dòng)刷新, sass語(yǔ)法 等功能...
1. 首先用npm初始化環(huán)境
mkdir react-webpack-demo
cd react-webpack-demo
npm init -y
- 安裝相關(guān)軟件包
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D
# 識(shí)別html轉(zhuǎn)換為jsx語(yǔ)法
npm install babel-preset-react -D
2.添加對(duì)html靜態(tài)文件的支持
- 在根目錄下新建文件夾
src, 在src內(nèi)加入index.htmlindex.js - 在根目錄下新建
webpack.config.js - 在
webpack.config.js中加入如下配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 負(fù)責(zé)將html文檔虛擬到根目錄下
let htmlWebpackPlugin = new HtmlWebpackPlugin({
// 虛擬的html文件名 index.html
filename: 'index.html',
// 虛擬html的模板為 src下的index.html
template: path.resolve(__dirname, './src/index.html')
})
module.exports = {
// 開(kāi)發(fā)模式
mode: 'development',
// 配置入口文件
entry: './src/index.js',
// 出口文件目錄為根目錄下dist, 輸出的文件名為main
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
// 配置開(kāi)發(fā)服務(wù)器, 并配置自動(dòng)刷新
devServer: {
// 根目錄下dist為基本目錄
contentBase: path.join(__dirname, 'dist'),
// 自動(dòng)壓縮代碼
compress: true,
// 服務(wù)端口為1208
port: 1208,
// 自動(dòng)打開(kāi)瀏覽器
open: true
},
// 裝載虛擬目錄插件
plugins: [htmlWebpackPlugin],
}
- 在
package.json內(nèi)scripts中添加"dev": "webpack-dev-server"
- 在
src/index.html中添加內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-webpack-demo</title>
</head>
<body>
react-webpack-demo
<hr>
高堂明鏡悲白發(fā), 朝如青絲暮成雪
</body>
</html>
- 在命令行內(nèi)運(yùn)行
npm run dev, 即可看到剛添加的index.html內(nèi)容
- 接下來(lái)我們配置babel對(duì)es6語(yǔ)法的支持, 以及對(duì)jsx語(yǔ)法的支持
3. 添加對(duì)js高級(jí)語(yǔ)法的支持
- 在項(xiàng)目根目錄, 添加.babelrc配置文件 presets為語(yǔ)法配置,plugins為插件配置
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
- 在webpack.config.js中添加module字段, 進(jìn)行插件loader配置
// webpack.config.js
module.exports = {
...
// 配置loader
module: {
// 根據(jù)文件后綴匹配規(guī)則
rules: [
// 配置js/jsx語(yǔ)法解析
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
};
- 在
src/index.html中加入id為root的div節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-webpack-demo</title>
</head>
<body>
react-webpack-demo
<hr>
高堂明鏡悲白發(fā), 朝如青絲暮成雪
<hr>
<div id="root"></div>
</body>
</html>
- 在
src/index.js中加入包含jsx語(yǔ)法的react組件
import React from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
this.decrease = this.decrease.bind(this);
this.increase = this.increase.bind(this);
}
// 加1
increase() {
let self = this;
self.setState({ number: self.state.number + 1 })
}
// 減一
decrease() {
let self = this;
self.setState({ number: self.state.number - 1 })
}
render() {
return (
<div>
<input type = "button" value = "減1"onClick = { this.decrease }/>
<span> { this.state.number } </span>
<input type = "button" value = "加1" onClick = { this.increase }/>
</div> )
}
}
ReactDOM.render(<Counter /> , document.getElementById('root'))
附錄: 添加對(duì)sass語(yǔ)法的支持(沒(méi)興趣可以跳過(guò))
- 安裝sass相關(guān)的loader
npm install style-loader css-loader node-sass sass-loader -D
- 在webpack.config.js內(nèi)新增規(guī)則
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
}
};
- 在src內(nèi)新增
index.scss
$designWidth: 750;
@function px2rem($px) {
@return $px*10/$designWidth + rem;
}
#root {
div {
font-size: px2rem(500);
display: flex;
color: #64B587;
input {
flex: 1 1 auto;
}
span {
flex: 1 1 auto;
text-align: center;
}
}
}
- 在
index.js中新增import index.scss
最終效果:
文中相關(guān)資源鏈接:https://pan.baidu.com/s/1zGRtjltIcqVVJRFNHFhxAw 密碼:6lwm
