react-typescript-sass-standard-template

项目简介

由于 Create React App 脚手架创建的项目过于简陋，没有集成诸如 eslint 等工具，致使每次在开发 react 项目的时候，就要颇费一番周折。针对这种不便，我搞了这个模板仓库。

仓库地址：https://github.com/fengcms/react-typescript-sass-standard-template

我的构建思想

css 和 js 分离。我很不喜欢在 js 中写 css。所以，我在项目中构建了 style 文件夹，所有的 scss 文件均放在此处。然后在项目入口中加以引用，即可。需要注意的是，这样搞，class 命名就要非常规范，否则容易产生冲突。一般来说，采用BEM命名即可。当然，也可简化一下，适合自己的团队即可。
自动注册组件，避免大段的 import。这点我没办法做得像 vue 一样，无需 import（使用 vue.use()），但我做到了简化并不影响普通引入的使用方式。
多语言文件是可以拆分的，并且自动引入的。
移动和PC端是分离。

当然，虽然我做了这些，如果你不喜欢的话，可以统统不要，删除即可。

运行命令

在项目文件夹内，运行如下命令：

# 安装依赖
yarn# 运行项目 (默认运行于 8000 端口，可在 package.json 文件中修改)
yarn start# 测试命令
yarn test# 编译项目 （项目编译后，文件将在 dist 目录）
yarn build# 编译 scss 文件（后面详细说明）
yarn style# 实时编译 scss 文件
yarn watch

集成功能说明

项目基于 react 构建。
- React 官方网站
采用 Create React App 创建。
- Create React App 官方网站
采用 eslint 校验代码，代码风格为 standard
- standard 风格的特点是很清晰的，如不要分号，2个空格缩进等。
- 配合 .eslintrc.js 文件，已实现 Atom 和 WebStorm 编辑器的自动格式化代码
- StandardJS 官方网站
采用 customize-cra 实现对 webpack 的配置注入
- 配置文件为 config-overrides.js
- 新增别名 @ 指向 /src 目录。
  - 如要新增更多别名，要同时维护 config-overrides.js 文件和 tsconfig.paths.json 文件。
- 生产代码编译目录调整为 /dist 目录。
  - 不喜可移除或改名，仅作为配置示例。
- 去除生产环境 console.log 等
- customize-cra 官方网站
采用 react-router-dom 实现路由。
- react-router-dom 官方网站
采用 classnames 工具，方便处理 className。
- classnames 官方网站
采用 i18next 实现国际化。
- i18next 官方网站
- react-i18next 官方网站
采用 sass 为 css 预编译语言。
- sass-lang 官方网站

目录说明

根目录说明

├── README.md
├── config-overrides.js
├── package.json
├── public                  入口以及静态资源目录
│   ├── favicon.ico
│   ├── index.html            入口 index.html
│   └── rem.js                移动端适配 rem js
├── src                     源码
├── tsconfig.json           TS 配置
├── tsconfig.paths.json     别名配置文件
├── yarn-error.log
└── yarn.lock

src 目录说明

├── index.tsx                 项目入口文件
├── react-app-env.d.ts        react ts 类型配置文件
├── reportWebVitals.ts        性能检查
├── components                组件文件夹
│   ├── index.ts                组件自动加载入口文件
│   ├── common                  移动端和PC端都需要使用的组件存放文件夹
│   │   └── SelectLang.tsx        切换语言演示组件
│   ├── mobile                  移动端组件文件夹
│   │   └── layout
│   │       └── layout.tsx        移动端组件演示组件
│   └── web                     PC 端组件文件夹
│       └── view                  任意深度的组件，均可自动引入
│           └── Home
│               └── count.tsx     hooks 使用演示组件
├── config                    配置参数文件夹
│   └── index.ts                配置入口演示文件
├── contexts                  自定义 contexts 文件夹
├── hooks                     自定义 hooks 文件夹
│   └── useInterval.ts          定时器 hook 演示文件
├── lang                      多语言文件夹
│   ├── index.ts                多语言入口文件
│   └── languages               多语言配置文件
│       ├── EN                    英语配置文件夹
│       │   └── home.ts             英语配置演示文件
│       ├── EN.ts                 英语配置入口文件
│       ├── ZH-CN
│       │   └── home.ts
│       └── ZH-CN.ts
├── state                     状态目录，预留
│   └── README.md
├── style                     scss 样式目录
│   ├── base                    基础 scss 文件目录
│   │   ├── _animation.scss       演示文件，下划线开头，表示不被独立编译
│   │   ├── _base.scss
│   │   ├── _color.scss
│   │   ├── _input.scss
│   │   ├── _main.scss
│   │   ├── _mixin.scss
│   │   ├── _mobile.scss
│   │   └── _reset.scss
│   ├── build.js                将所有 scss 文件集合生成 style.scss 的脚本文件
│   ├── config.scss             基础配置 scss 文件
│   ├── style.scss              生成后的 style.scss 文件，项目入口中引用他即可
│   └── watch.js                自动编译脚本 yarn watch 命令运行
├── utils                     工具目录
│   └── tools.ts                演示文件
└── views                     视图目录├── App.tsx                 App 入口文件├── mobile                  移动端视图文件目录│   ├── About.tsx             演示文件│   ├── Home.tsx│   └── index.tsx             移动端入口文件└── web                     PC端视图文件目录├── About.tsx├── Home.tsx└── index.tsx             PC端入口文件

自动组件说明

我比较喜欢这种方式，但是这是有优点，也有缺点的。你需要根据自己的事情情况加以判断。

优点

使用简便，代码量少，引用多个组件时也只要 import 一条即可。

缺点

使用自动组件后，WebStorm 等 IDE 是无法通过你的引用自动跳转到该组件的。
不能有重名的文件，否则后面的会取代前面的。

如何克服缺点

采用规范的目录组织方式以及组件命名方式，使后续开发者或者自己可以根据组件的名称等信息，迅速定位到组件文件。

越灵活，则不可控因素就越多，就越需要一定的规则去规避风险。我喜欢规则，但不喜欢限制，与诸君共勉。

新建自动注册组件

在 @/components 目录内，任意层级，任意位置，建立 .tsx 为后缀的组件文件，像普通组件一样编写即可。

以一个简单的组件为例子：

import React, { FC } from 'react'
import classnames from 'classnames'interface Props {className?: stringchildren?: React.ReactElement | React.ReactElement[]
}const Components: FC<Props> = ({ className = '', children }) => {return (<div className={classnames('mobile-layout', className)}>{children}</div>)
}export default Components// 上面的和普通组件一样，下面的代码就是自动注册的钩子
export const auto = {name: 'MobileLayout',Components
}

在组件中，导出一个叫 auto 的对象，包含 name 和 Components 两个 key 值，分别代表名称和组件内容。

编写好这样的组件后，这个组件就自动挂载好了。

某些组件可能已经不使用了，但是你也不想删了，可以将上面的 auto 部分给注释掉，在编译的时候，会自动摇树掉这个组件的（除非你又普通方式引用了-_-|||）

使用自动注册组件

在项目任意 tsx 文件中，均可引用自动注册的组件并使用。

import React, { FC } from 'react'
// 引入自动注册组件，并命名为 C
import C from '@/components'const About: FC = () => {return (<div className="App">this is about page{/* 以 C 开头，后面带你定义的组件名称，即可正常使用 */}<C.WebHomeCount /></div>)
}export default About

上面命名为 C 是位了方便使用。如果你命名冲突，完全可以跟换为其他名字的。

国际化说明

增加新语言

在 @/lang/languages 文件夹内，参考现有的文件夹以及文件，即可。如要增加 JP 日本语，可以新建 JP 文件夹和 JP.ts 两个文件。然后对 JP.ts 配置文件进行微调即可。

增加新模块

在 @/lang/languages/{对应语言目录} 内，新增该模块命名的 ts 文件，并参考默认的 home 模块编写配置即可。

使用

tsx 组件内使用

import React, { FC } from 'react'
// 引用 useTranslation
import { useTranslation } from 'react-i18next'const Home: FC = () => {// 获得 t 函数const { t } = useTranslation()return (<div className="App">{/* 普通使用，第一个参数为 `{模块.键值}`，第二个为回退文字 */}{t('home.home', 'Home')}<br/>{/* 带变量使用，第一个参数为 `{模块.键值}`，第二个为回退文字，第三个为变量对象 */}{t('home.welcome', 'Welcome', { name: 'fungleo' })}<br/>{/* 带回车的文字，需要用 whiteSpace: 'pre-line' 样式控制（可以不行内内联） */}<span style={{ whiteSpace: 'pre-line' }}>{t('home.message')}</span></div>)
}

普通 ts 文件内使用

// 引用
import i18n from '@/lang'// 使用
console.log(i18n.t('home', 'Home'))

更多请参考官方文档。

style scss 说明

在项目 @/style/ 目录中，我们可以新建多个文件夹、多个层级的文件夹，在里面编写 scss 文件。

然后运行 yarn style 命令，即可全部自动引入到 @/style/style.scss 文件中了。

如果你一会儿就新建一个文件，一会就新建一个文件，可以直接运行 yarn watch 命令。

该命令会启动一个进程，当发现有新的 scss 文件时，就会自动添加进去。一般在项目稳定时，是不需要启动这个进程的。

@/style/base 目录中的 scss 文件不会自动引入，需要再 @/style/config.scss 文件中手动引入。因为这些基础样式，引用是有顺序要求的，前后颠倒了会出问题。此外，一些变量等，都可以在 @/style/config.scss 中配置。

建议，除入口scss文件外的所有 scss 文件名以 _ 下划线开头，表示该文件为组件文件，不需要独立编译。当然，这只是个含义，现代框架库不管这些…… 但有些传统我们是要坚持的（一位逐渐秃顶的前端如是说……）

同自动组件一样，在我这样的规划中，js 和 scss 文件分离了，找起来可能不太好找。因此，需要大家用一定的规则去组织文件夹以及文件，这样才能不乱。

我这样搞得好处是，无需其他配置，即可在 scss 文件中使用混入、引用等各种高级特性了。

关于我

FungLeo

Blog: http://www.fungleo.com/

LICENSE

MIT

觉得不错，点个赞，谢谢！

基于 TS 的 React 模板项目，集成 eslint sass，采用 StandardJS 代码风格，包含自动注册组件等各项功能，新建项目或 React 学习必备相关推荐

【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
前端通过eslint+prettier+husky统一代码风格
背景多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
软件开发过程与项目管理(13.软件项目集成计划控制)
软件开发过程与项目管理(13.软件项目集成计划控制项目集成计划软件项目管理的最重要的四个要素四要素的关系项目集成计划的作用项目集成计划的内容项目集成计划的流程项目集成计划风险项目集成计 ...
Vue项目设置Eslint规则
一.需求当我们创建完vue的新项目后,希望写完代码后会自动格式化代码,以及代码规范化的校验,以便团队相互配合开发二.Vscode安装插件安装 ESLlint.Vetur.Prettier 这三个 ...
项目集成管理的6个关键过程
根据项目管理协会(PMI)的说法,项目集成管理是第一个项目管理知识领域,主要涉及确保项目的不同任务得到适当协调所需的程序. 在开发一个项目的过程中,整个子过程被整合成一个完整的项目,这就构成了&q ...
angular 标准目录结构_Angular-cli新建项目目录结构详解
Angular-cli新建项目目录结构详解在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...
如何利用express新建项目（上）
如何利用express新建项目(上) 摘要这篇文章将讲解了如何快速利用express新建项目一.express4.x的安装 1. npm install -g express 2. npm ins ...
ASP.NET Core 新建项目(Windows) - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 新建项目(Windows) - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 新建项目(Windows) 对于任何语言和框架,都 ...
VS2005 项目怎样添加“依赖”、“库目录”和“包含目录”
1. 添加编译所需要(依赖)的 lib 文件 [解决方案资源管理器]"项目->属性->配置属性->连接器->输入->附加依赖项"里填写"w ...

基于 TS 的 React 模板项目，集成 eslint sass，采用 StandardJS 代码风格，包含自动注册组件等各项功能，新建项目或 React 学习必备