React 与 vite 碰撞文件目录新建vite项目 yarn create vite 或者 npm init vi

文件目录

.
├── README.md
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── apis
│   ├── components
│   ├── container
│   ├── favicon.svg
│   ├── hooks
│   ├── images
│   │   └── logo.svg
│   ├── index.css
│   ├── locale
│   ├── main.tsx
│   ├── reducer
│   ├── routers
│   ├── style
│   ├── types
│   │   └── vite-env.d.ts
│   └── utils
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

新建vite项目

yarn create vite 或者 npm init vite@latest

vite 配置

别名配置

vite.config.ts

import { defineConfig } from 'vite'
const { resolve } = require('path')
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    // 添加 alias
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@container': resolve(__dirname, 'src/container'),
      '@hooks': resolve(__dirname, 'src/hooks'),
      '@images': resolve(__dirname, 'src/images'),
      '@style': resolve(__dirname, 'src/style'),
      '@utils': resolve(__dirname, 'src/utils'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
  },
})

tsconfig.json

{
  "compilerOptions": {
    ...,
    "baseUrl": "./",
    "paths": {
      // 根据别名配置相关路径
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@container/*": ["./src/container/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@images/*": ["./src/images/*"],
      "@style/*": ["./src/style/*"],
      "@utils/*": ["./src/utils/*"]
    }
  }
}

配置问题

Cannot find module 'path' 或者 Cannot find name __dirname

安装yarn add @types/node --dev tsconfig.json

"compilerOptions": {
    ...
    "types": [
      "node"
    ]
},

可选链配置

什么是可选链？

当访问多层对象属性(如obj.fir.sec)时，如果属性obj为空，则会报引用错误。

空值合并运算符: ??

如果是可选链就可以写成obj?.fir?.sec

如何使用可选链

babel 版本 > 7
添加devDependencies依赖：

yarn add @babel/plugin-proposal-optional-chaining --dev // 可选链
yarn add @babel/plugin-proposal-nullish-coalescing-operator --dev // 双问号

在.babelrc或者babel.config.js中这加入2个插件

{
    "presets": ["react-app", "@babel/preset-typescript"],
    "plugins": [
        ...,
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator"
    ]
}

git环境

配置 commitlint

yarn add @commitlint/config-conventional @commitlint/cli --dev
yarn add husky --dev
// 我没用这个： yarn add lint-staged --dev
yarn add --dev prettier pretty-quick

根目录添加.commitlintrc.js:

module.exports = { extends: ["@commitlint/config-conventional"] };

在package.json里添加脚本

"scripts": {
    ..., 
    "prepare": "husky install"
},

执行命令: npm run prepare

在项目下会生成一个 .husky 文件夹，可以在其中配置相关 git 钩子git hooks。

执行命令:

npx husky add .husky/pre-commit "npx pretty-quick $1"
npx husky add .husky/commit-msg "npx commitlint --edit $1"

然后就可以了

styled-components

安装:

yarn add styled-components
yarn add --dev @types/styled-components

创建 globalStyle 文件, 修改全局样式

import { createGlobalStyle } from 'styled-components';

export const Globalstyle = createGlobalStyle`
  @import-normalize;
  body{
    margin: 0;
    padding: 0;
    font-size: 50px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    background: #FAFAFA;
  }
`;

导入main.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import '@/locale/index'
import { Globalstyle } from '@styles/globalStyle';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Globalstyle />
  </React.StrictMode>,
  document.getElementById('root')
)

多语言配置

新增模块多语言: 如 login

// login/en.ts
const en = {
    login: 'login',
    register: 'register',
};

export default en;

// login/zh.ts
const zh = {
    login: '登录',
    register: '注册',
};

export default zh;

配置多语言，自动引入文件夹

import i18n, { Resource } from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getStorage } from '@/utils/storage';

interface ITranslation {
  [key: string]: string
}

const cache: Resource = {};

const modules: Record<string, {
  [key: string]: ITranslation;
}> = import.meta.globEager('./**/*.ts')

for(let path in modules) {
  let lastPoint = path.lastIndexOf('.');
  let lastLevel = path.lastIndexOf('/');
  let firstLevel = path.indexOf('/');
  let index = path.substring(lastLevel + 1, lastPoint);
  let name = path.substring(firstLevel + 1, lastLevel);
  cache[index] = {
    translation: { 
      [name]: modules[path].default, 
      ...(cache[index] as { translation: ITranslation })?.translation }
  }
}

i18n.use(initReactI18next).init({
	lng: getStorage('react-vite-cli') ?? 'zh',
	resources: cache,
});

export default i18n;

在main.tsx引入

import '@/locale/index'

3.1 函数组件

// 导入多语言库
import { useTranslation } from 'react-i18next';

function Login() {
    // 使用
    const { t } = useTranslation();

    return <h1>{t('login.login')}</h1>;
}

export default Login;

3.2 HOC 组件

import React, { Component } from 'react';
import { Translation } from 'react-i18next'; // 导入

class Login extends Component<{}, {}> {
    render() {
        return (
            <Translation>
                {(t) => (
                    <div className={styles.test}>
                        <div>{t('login.login')}</div>
                    </div>
                )}
            </Translation>
        );
    }
}

export default Login;

3.3 切换多语言

i18n.changeLanguage('zh');

参考网站

待整理：

git hooks