React搭建移动端基础项目

4,586 阅读3分钟

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. 部署项目

  1. 执行npm run build
  2. 本地预览(其中的一种方式)
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 即可