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
构建。 - 采用
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
实现路由。 - 采用
classnames
工具,方便处理className
。 - 采用
i18next
实现国际化。 - 采用
sass
为css
预编译语言。
目录说明
根目录说明
├── 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?: string
children?: 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
觉得不错,点个赞,谢谢!