react-javascript

2024年04月29日

柏拉文

越努力，越幸运

目标

• 通过create-react-app 脚手架搭建项目
• 项目搭建完成之后后续得相关配置

项目初始化

1. 创建项目

NPX

npx create-react-app my-app

NPM

npm init react-app my-app

Yarn

yarn create react-app my-app

2. 安装依赖

NPM

npm install

Yarn

yarn

项目 Webpack 配置

Webpack 配置方案

---

• 暴露Webpack配置: yarn run eject 、 Y

  ::: warning 注意

  • 暴露Webpack配置之前不能修改任何文件，否则会报错

  • 执行完yarn run eject 和 Y 之后，package.json 中的eject命令将会自动移除（这个毫无影响，不用关心） :::

  • 方案缺点:

    • npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏
    • 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查

• 扩展 Webpack 配置

  ::: warning 注意 扩展Webpack配置: react-app-rewired是对create-react-app进行自定义配置的社区解决方案。它不会直接去修改create-react-app的默认配置，而是在create-react-app配置的基础上进行扩展。 :::

  • 方案步骤:

    1. 安装react-app-rewired

    yarn add react-app-rewired react-scripts -S
    2. 根目录创建config-overrides.js

    module.exports = function override(config, env) {
      //do stuff with the webpack config...
      return config;
    }
    3. 修改package.json配置

    /* package.json */
    "scripts": {
      "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test"
    }

Webpack 具体配置

---

• sass、less配置

  yarn add sass sass-loader less less-loader customize-cra -D

  :::details 点击查看代码

  const { override, adjustStyleLoaders } = require("customize-cra");
  
  module.exports = override(
    adjustStyleLoaders(rule => {
      rule.use.push({
        loader: require.resolve("sass-loader"),
      });
    }
    )
  );

  :::

项目部署配置

方案A 配置 package.json

---

• 项目为根路径 https://www.xxx.com/

  • package.json 在package.json中添加一行 "homepage":"." 。 设置为 "."会自动在前面添加一个., 这样绝对路径就变为相对路径了

    :::details 点击查看代码

    {
      "name": "react-study",
      "version": "0.1.0",
      "private": true,
      "homepage":".",
      "dependencies": {
        ……
      },
      "scripts": {
        ……
      }
    }
    

    :::

  • react-router 路由配置

    :::details 点击查看代码

    function App(props) {
      return <Layout>
        <BrowserRouter>
          <Routes>
            <Route exact path='/' element={<List/>}></Route>
            <Route exact path='/detail'element={<Detail/>}></Route>
          </Routes>
        </BrowserRouter>
      </Layout>
    }

    :::

• 项目不为根路径 https://www.xxx.com/yyy

  • package.json 在package.json中添加一行 "homepage":"/yyy"

    :::details 点击查看代码

    {
      "name": "react-study",
      "version": "0.1.0",
      "private": true,
      "homepage":"/yyy",
      "dependencies": {
        ……
      },
      "scripts": {
        ……
      }
    }
    

    :::

  • react-router 路由配置

    :::details 点击查看代码

    function App(props) {
      return <Layout>
        <BrowserRouter>
          <Routes>
            <Route exact path='/yyy/' element={<List/>}></Route>
            <Route exact path='/yyy/detail'element={<Detail/>}></Route>
          </Routes>
        </BrowserRouter>
      </Layout>
    }

    :::