前端React工程搭建-记录

React工程搭建-记录

一、创建react typescript命令

npx create-react-app xxxx --template typescript

二、工程配置

1.支持读取json 文件在ts.config中配置

    "moduleResolution": "node",
    "resolveJsonModule": true,

2.css module 模组化 按需加载, 配置支持css
类型声明 .d.ts方式
src下新建 custom.d.ts文件

declare module "*.css" {
  const css : {[key: string]: string}
  export default css
}

3.安装插件 npm install typescript-plugin-css-modules --save-dev
让 styles 也可以代码提示
安装完成后需要注册启用，在tsconfig中

"jsx": "react-jsx",
"plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
]

如果你是使用 vscode 开发的需要添加另外的配置如下：
根目录创建.vscode文件夹及settings.json

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}
  1. 配置媒体资源和字体
    图片资源一版要统一管理，在src下创建 assets 文件在创建分类 images 文件把文件放入其中就可以了

字体声明：

@font-face {
  font-family: "NbaFont";
  font-display: block;
  src: local("NbaFont"), url(../public/fonts/Knockout-c10.ttf);
}

@font-face {
  font-family: "NbaRegularFont";
  font-display: block;
  src: local("NbaRegularFont"),
    url(../public/fonts/Knockout-HTF67FullBantamwt-Regular.otf);
}

三、Craco 用于覆盖React配置

Craco（Create React App Configuration Override）是一个用于覆盖 Create React App（CRA）的默认配置的工具。它允许您在不 ejecting 的情况下自定义 CRA 的配置。以下是如何使用 Craco 的基本步骤：
安装 Craco：

在您的 CRA 项目中，使用以下命令安装 Craco：

npm install @craco/craco --save-dev

或者使用 Yarn：

yarn add @craco/craco --dev

创建 Craco 配置文件：

在项目根目录下创建一个名为 craco.config.js 的文件。这个文件将包含您要覆盖的配置。

更新 scripts：

在 package.json 文件中，将 react-scripts 替换为 craco。例如：

{

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

编写配置：

在 craco.config.js 文件中，您可以编写自定义配置。例如，要覆盖 Webpack 配置，您可以这样做：


const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/'),
    },
  },
};

在这个例子中，我们添加了一个新的路径别名 @components，它指向 src/components/ 目录。

使用自定义配置：
现在您可以在项目中使用自定义配置。例如，在上面的例子中，您可以这样导入组件：


import MyComponent from '@components/MyComponent';

这只是 Craco 的一个简单示例。您还可以覆盖 Babel、ESLint、PostCSS 等配置。有关更多信息和示例，请查阅 Craco 文档：
https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md

四、多环境打包

工程打包需要区分测试包，正式包（比如它们的请求base地址不同）可以配置不同.env文件，默认功能只有一个，React项目中使用dotenv可以帮助你管理环境变量
dotenv 是一个轻量级的 Node.js 库，可以从 .env 文件中加载环境变量，非常方便。

安装

npm install dotenv --save-dev

4.1 dotenv-cli

我在项目中直接用了dotenv-cli
从文件中加载环境变量, 它能将环境变量中的变量从 .env 文件加载到 process.env 中

npm install dotenv-cli

根目录下创建.env 文件。如：.env.development

# 开发环境
PUBLIC_URL=/play/
REACT_APP_API_BASE_URL=https://testapi.nba.cn/
REACT_APP_SENSOR_URL=https://nba-dc-analytic.nbadata.cn/sa?project=default
REACT_APP_SHOW_VCONSOLE=true
REACT_APP_AWARD_BASE_URL=https://testapi.nba.cn

在项目中通过 process.env 获取环境变量。例如：

import sensors from "sa-sdk-javascript";
export function initSensors() {
  if (typeof window !== "undefined") {
    console.log(process.env.REACT_APP_SENSOR_URL);
    sensors.init({
      show_log: true,
      server_url: process.env.REACT_APP_SENSOR_URL,
      app_js_bridge: true,
      is_track_single_page: false,
      use_client_time: true,
      send_type: "beacon",
      heatmap: {
        clickmap: "not_collect",
        scroll_notice_map: "not_collect",
      },
    });
    sensors.registerPage({
      activity_name: "NBA APP PLAY",
    });
  }
}

4.2 配置命令行

dotenv <other commands> 直接将根目录下.env 结尾的文件中的变量添加到 process.env 上
dotenv -e 可以指定一些其他的.env 文件，将变量添加到 process.env 上

"scripts": {
    "start": "dotenv -e .env.development craco start",
    "build:prod": "dotenv -e .env.production craco build",
    "build:dev": "dotenv -e .env.test craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

五、路由react router

•react-router：为 React 应用提供了路由的核心功能；
•react-router-dom：基于 react-router，加入了在浏览器运行环境下的一些功能。

安装路由
要将 React Router 添加到现有项目，就需要根据使用的包管理器来安装依赖：

// npm
npm install react-router-dom@6

// pnpm
pnpm add react-router-dom@6

// yarn
yarn add react-router-dom@6

react-router-dom中的两种模式配置：

•BrowserRouter 是需要服务端配合, 是基于html5的pushState和replaceState的，很多浏览器不支持，存在兼容性问题。利用h5 Api实现路由切换.
•HashRouter 利用hash实现路由切换,是由浏览器端解析路由

//BrowserRouter  (./router/index.tsx)
import * as React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import index from '../pages/Index/index';
export default class RouteConfig extends React.Component {
  render(){
    return (
      <BrowserRouter basename=/pointsmall>
        <Routes>
          <Route path=/ element={<index/>}></Route>
        </Routes>
      </BrowserRouter>
    )
  }
}

HashRouter (./router/index.tsx)

import React, { Component } from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';
import index from '../views/Index/index';
import test from '../views/Test/index';
import result from '../views/Result/index';
export default class RouteConfig extends Component {  
render(){   
 return ( 
  <HashRouter>
  <Routes>
  <Route path=/ element={<index/>}></Route>
  <Route path=/test/:id element={<test/>}></Route>
  <Route path=/result element={<result/>}></Route>
  </Routes>      </HashRouter> 
   )  }}

六、移动端适配

px自动转换为vw

安装：postcss-px-to-viewport 和 postcss-loader

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

引入插件
在craco.config.js中配置style:postcss

const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = {
  webpack: {
    alias: {
      "@": resolve("src"),
    },
    configure: (webpackConfig, webpack) => {
      // 修改输出路径
      // webpackConfig.output.publicPath = "/play/";
      // 返回修改后的webpack配置
      return webpackConfig;
    },
  },
  style: {
    postcss: {
      mode: "file",
    },
  },
};

然后工程中新建postcss.config.js文件，并配置

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要转换的单位，默认为"px"
      viewportWidth: 375, //  设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ["*"], // 能转化为vw的属性列表
      viewportUnit: "vw", //  希望使用的视口单位
      fontViewportUnit: "vw", // 字体使用的视口单位
      selectorBlackList: ["wrap"], // 需要忽略的CSS选择器
      minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的单位
    },
  },
};

VSCode插件

  1. Prettier - Code formatter
  2. TONGYI Lingma

参考

React 年度全家桶大全
react+ts【项目实战一】配置项目/路由/redux
dotenv-cli 在项目中的使用
如何快速搞定前端屏幕尺寸兼容问题
Prettier - Code formatter配置(vscode)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容