1. 创建项目
npm install -g create-react-app
create-react-app myProject
yarn start
2. 安装项目使用的技术库
npm install react-app-rewired customize-cra /1 rewire
antd-mobile babel-plugin-import /2 UI库
postcss-pxtorem /3 px转rem库 1:2比例
node-sass /4 css扩展语言sass
react-router-dom /5 路由库
http-proxy-middleware /6 http代理库
--save
3. 定义或者修改脚手架的配置
方式1: 暴露webpack配置文件
// 此命令是不可逆的
npm run eject
方式2:自定义脚手架配置
- step1:在根目录下,创建一个文件
config-overrides.js
// 这里是我要用一些配置信息
const {override, fixBabelImports, addPostcssPlugins, addWebpackAlias } = require('customize-cra');
module.exports = override(
// add webpack alias
addWebpackAlias({
['@']: path.resolve(__dirname, 'src'),
['components']: path.resolve(__dirname, 'src/components')
}),
// babel-plugin-import
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css'
}),
// postcss-pxtorem
addPostcssPlugins([require('postcss-pxtorem')({
rootValue: 16,
propList: ['*'],
// propWhiteList: [],
// selectorBlackList: ['weui-']
})])
)
- step2:修改
package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
- "eject": "react-scripts eject"
}
4. 编写一个实时获取根FontSize大小的js
const baseSize = 32
function setRem() {
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + 'px'
}
setRem();
window.onresize = function() {
setRem()
}
// 此文件在`index.js`中引入
5. 配置本地代理
方式1:简单配置
在package.json
文件中添加
{
"proxy": "http://www.baidu.com"
}
方式2:利用http-proxy-middleware
- step1:在
src
目录下创建一个setupProxy.js
文件
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
// 当请求:localhost:3000/api时代理到http://192.168.2.233:3000/api上
app.use(
proxy('/api', {
target: 'http://192.168.2.233:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}),
);
};
6.创建环境变量
- Adding Environment Variables In
.env
in the root of your project
# 修改端口号
PORT=200
# 修改主机
HOST=
# 二级地址
PUBLIC_URL=/front
HTTPS=false
REACT_APP_WEBSITE_TITLE = Welcome
# also works
# REACT_APP_VERSION = ${npm_package_version}
REACT_APP_VERSION = $npm_package_version
- 引用定义的环境变量在
index.html
中
<title>%REACT_APP_WEBSITE_TITLE%</title>
- 引用定义的环境变量在javascript中
...
render() {
return (
<div>
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
<form>
<input type="hidden" defaultValue={process.env.REACT_APP_WEBSITE_TITLE} />
</form>
</div>
);
}
7. 部署项目
- 执行
npm run build
- 本地预览(其中的一种方式)
yarn global add serve
serve -s build // 在当前目录下启动即可开启一个默认的5000端口的本地服务,如果说此命令不存在,则需要配置环境变量
8. 代码部署到服务器上
这里是用nginx提供静态服务,下面所涉及的目录也是我自己服务器上的地址,仅供参考
nginx部署到根目录下
- 进入
/etc/nginx/conf.d
目录下,修改文件default.conf
server {
listen 80; // 监听80端口
server_name test.com; // 你的域名或者IP地址
location / { // 根目录
root /usr/local; // 前端文件路径
index index.html; // hash模式只配置访问html就可以了
try_files $uri $uri/ /index.html; // history模式下
}
}
- 修改完后,重启nginx:
nginx -s reload
- 访问:
域名|ip地址
即可
nginx部署到子目录下
- 进入
/etc/nginx/conf.d
目录下,修改文件default.conf
server {
listen 80;
server_name test.com; // 你的域名或者ip地址
location /demo { // 子级目录
alias /front/demo; // 前端也要配置二级目录,react项目是在环境配置文件中配置属性PUBLIC_URL=/demo,把前端打包的build目录下的内容,放在服务器对应的二级目录下demo下
index index.html;
try_files $uri $uri/ /demo/index.html;
}
}
- 修改完成之后,重启nginx服务:
nginx -s reload
- 访问:
域名|ip地址
/demo 即可