[笔记] 脚手架解析

这篇文章的笔记：

https://juejin.im/post/59dcd87451882578c2084515

##前端配置记录

1. 配置文件

• .editorconfig

存储统一的样式规范，告诉编辑器该项目的代码规范；

• .eslintrc.js

eslint工具的配置文件；

• .stylelintrc.js

对样式文件进行语法规范检测的工具；

• .flowconfig

对js语法进行类型检测的工具（有点像ts的类型检测）；

• .env

管理环境变量（例如NODE_ENV）；

• jest.config.js

jest的配置文件；

• jsdoc.config.json

根据文件内函数注释生成文档；

• Dockerfile

docker容器的配置文件

---

2. 工具脚本

npm脚本

npm start或者npm test等脚本是内置的预设命令（类似宏之类的东西），其他定义的脚本都需要加run运行

---

3. 自动格式化代码

• prettier在开发时对代码格式化；
• husky以npm脚本的形式调用git hooks（在package.json中配置）；
• lint-staged对staged（准备提交）阶段的文件执行npm脚本（在package.json中配置）;

---

4. 开发规范

• 样式

1. 在webpack中使用loader编译成css；
2. 使用Autoprefixer或者postcss对样式文件进行处理，比如压缩、为某些样式添加浏览器前缀等；

• 图片字体等额外资源

1. 通过import引入；
2. 体积小于10000 bytes的图片会返回data URL而不是实际的路径，大于10000 bytes的图片会拷贝到最终构建的文件夹中，并且根据内容的hash值重新命名；

为什么要采用import的方式引入样式和图片？

1. 脚本和样式能够压缩及打包在一起，以便减少额外的网络请求；
2. 在编译阶段如果发现文件丢失就会及时报错，而不是上线之后在呈现给用户404错误；
3. 根据文件内容的hash值对文件进行重命名而避免浏览器缓存问题；

有一些第三方类库不支持和react集成，就需要把资源放入public文件夹中，然后在html文件中引用。

一些弊端：

• public文件夹中的文件不会做任何处理，包括压缩或者拼接之类的；
• 如果有文件丢失在编译阶段不会报错，用户可能会收到404的请求返回；
• 手动处理缓存问题（对文件发生修改时对文件进行重命名，或者修改Etag等缓存条件）；

特殊情况：

• 需要引用一些打包之外的额外脚本；
• 和webpack不兼容的脚本；
• 上千张图片需要动态引用；
• 构建时打包输出法人文件需要指定文件名；

---

5. 添加自定义的环境变量

在process.env上添加自定义额环境变量供全局访问；

• 在win系统下设置；
• 在.env文件中（dotenv类库）中设置（所有的自定义环境变量都需要以REACT_APP_SECRET_CODE开头）；