xhw-pro开发笔记

:::tips 📶这里会记录xhw项目开发中遇到的各种乱七八糟的问题，项目配置：

• 前端：react.js
• 后端：node.js
• UI库：antd.mobile
• 系统环境：mac
• 开发平台：vscode :::

  🔨开发踩坑

  项目创建

  准备好create-react-app之后，直接运行下面代码
  npx create-react-app [project-name] --template typescript

less module配置

首先要让.less可以作为一个module导出，在react-app-env.d文件中进行配置

declare module "*.less" {
  const content: { [className: string]: string };
  export default content;
}

然后安装less，直接运行npm i less less-loader --save-dev
安装完成后对less进行配置，如果是按上方项目创建流程创建的项目，可以先直接运行npm run eject进行默认配置，完成之后可以在config文件夹中找到webpack.config.js
在自动生成的sass代码后面，仿照写上自己less的部分，蓝色部分为需要添加部分

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.less$/;


// 搜索sass-loader找到对应位置
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        // getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[local]_[hash:base64:5]'
      },
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less or .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        // getLocalIdent: getCSSModuleLocalIdent,
        localIdentName: '[local]_[hash:base64:5]'
      },
    },
    'less-loader'
  ),
},

如果以上步骤完成后，仍然不行，尝试运行npm i -D node-sass，可能是create-react-app脚手架缺陷导致

router 配置

这个过程中也会碰到useHistory import失败的问题

如果是按照antd.mobile中的TabBar遇到报错，是因为在最新的v6中，语法已经升级，应该如下写

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
const setRouteActive = (value: string) => {
  navigate(value);
};

<TabBar
  safeArea={true}
  activeKey={location.pathname}
  onChange={(value) => setRouteActive(value)}>
  {tabs.map((item) => (
    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
  ))}
</TabBar>

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/mine" element={<Mine />} />
    <Route path="/mine/author" element={<Author />} />
    <Route path="/mine/setting" element={<Setting />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>

简单来说就是

• history没有了，取而代之是navigate
• Switch没有了，取而代之是Routes

更多信息查看最新官方文档

@ alias 配置

如果是按我第一步创建的项目，直接找到webpack.config.js，搜索alias找到对应代码处，添加即可
"@": path.resolve(__dirname, '../src')

🎯准备开发

• 首页
• 我的
• 关于作者

• [ ] 用node.js跑起来后端