搭建react項目(低配版)
react項目低配版，可作為react相關測試的基礎環境，方便快速進行測試。
git clone [email protected]:whosMeya/simple-react-app.git
git checkout v1.0.0
GitHub地址: simple-react-app v1.0.0
項目搭建過程如下
項目初始化
# 新建文件夾
mkdir simple-react-app
# 進入文件夾
cd ./simple-react-app
# npm初始化 -y參數表示使用默認配置，執行後會生成package.json文件
npm init -y
添加React程式碼
安裝react相關依賴
npm install --save react react-dom @types/react @types/react-dom
新建index.js文件，並寫入下面程式碼
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>Hello World!</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
新建index.html文件，並寫入下面程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./index.js"></script>
</html>
配置
安裝webpack相關依賴
npm install --save-dev webpack webpack-cli
添加webpack配置文件
根目錄新建文件 webpack.config.js，並寫入下面程式碼
const path = require('path');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
}
module.exports = config;
添加插件html-webpack-plugin
html-webpack-plugin用於打包html文件。
安裝
npm install --save-dev html-webpack-plugin
修改 webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: 'index.html',
+ }),
+ ],
}
module.exports = config;
安裝Babel相關依賴
babel將react語法編譯為瀏覽器識別的語法。
ps: Babel7將所有包放在了@babel/ 下。
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill @babel/preset-react @babel/plugin-proposal-class-properties
添加Babel配置文件
根目錄新建文件 babel.config.json，並寫入下面程式碼
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
webpack配置文件中添加Babel配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
+ module: {
+ rules: [
+ { test: /\.js$/, use: 'babel-loader' }
+ ]
+ },
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
}),
],
}
module.exports = config;
添加build命令
修改package.json
"scripts": {
+ "build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
運行build命令看看效果
npm run build
打包成功，根目錄會生成 dist。
打開dist下index.html，會看到 Hello World!
添加start命令
使用 webpack-dev-server 熱啟動。
npm install --save-dev webpack-dev-server
修改 package.json
"scripts": {
"build": "webpack --mode production",
+ "start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
運行start命令看看效果
npm run start
項目運行成功，打開 //localhost:8080/ 會看到 Hello World!
修改index.js, 保存後頁面也會同步刷新。
