本文章仅供自己参考使用
1.快速构建react项目
npm install -g create-react-app --template typescript // 全局安装create-react-app ts版本 (只需要安装一次)
create-react-app demo // 创建项目
cd demo // 进入项目目录
创建的项目目录结构：
-Demo // 项目名
-node_modules // 存放第三方包
-public
-favicon.ico
-index.html
-manifest.json
-src // 页面代码都写在这下面
-App.css
-App.js
-App.test.js
-index.css
-index.js //项目入口
-logo.svg
-serviceWorker.js
-setupTest.js
.gitignore
package.json
README.md
2.初始化项目
在项目的根目录下打开命令行，输入
npm init -y // 项目初始化, 执行完后会生成 package.json文件
3.安装所需包
npm i --save react react-dom antd //安装react 的东西,以及antd (*如果做移动端项目可以安装antd-mobile*)
npm i --save-dev webpack webpack-cli webpack-command //安装webpack 的三个基本项
npm i --save-dev webpack-dev-server //安装webpack 服务器 webpack-dev-server,让启动更方便
npm i --save-dev html-webpack-plugin //自动创建html文件 html-webpack-plugin
npm i --save-dev clean-webpack-plugin //清除无用文件 clean-webpack-plugin,将每次打包多余的文件删除
npm i --save-dev style-loader css-loader // css相关loader
npm i --save-dev node-sass sass-loader // scss 相关loader
npm i --save-dev file-loader url-loader // 加载其他文件，比如图片，字体
//安装babe
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader
4.根目录创建webpack.config.js文件,代码如下
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebPackPlugin({
template: './public/index.html',
filename: './index.html',
});
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
{
test: /\.(css|less)$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
},
plugins: [htmlPlugin],
};
5.在根目录下添加文件 .babelrc,代码如下
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
6.修改 package.json
"scripts": {
"start": "webpack-dev-server --open --mode production",
"watch": "webpack --watch",
"build": "webpack --mode production",
"dev": "webpack --mode development& webpack-dev-server --open --mode development",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
7.修改public / index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
8.修改src / index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
9.修改src / App.js文件
import React, { Component } from 'react';
import './App.css'; // 引入样式文件
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="main">
<div>我是首页</div>
</div>
);
}
}
export default App;
10.修改 src / App.css文件
.main {
background: darkgray;
width: 500px;
height: 500px;
margin: 0 auto;
}
11.启动项目
npm run dev
