yarn install
yarn dev
yarn test

yarn install
yarn build

docs 存放webpack打包后的可部署文件, 用于GitHub Page展示 [由dist目录赋值粘贴得来]
documents 存放项目静态资源库, 页面设计图png以及psd
scr 项目代码
  components react组件, 内部每一个文件都是一个组件
    commons 通用组件
    ... 完整页面组件
  css 存放样式
    base 所有页面的基础样式, 如全局取消margin设定, 全局通用颜色等
    commons 通用组件的样式文件
    ... 根目录文件: 组件样式文件
  entry 存放用于webpack打包的入口文件 
  fonts 存放字体
  imgs 用于存放页面的基础图片, 如背景等
  template 用于承载react组件的模板页面
  upload 存放业务相关图片
.gigignore git忽略提交文件或目录
package.json npm package的配置文件, 存放了该项目使用了哪些npm模块清单, 项目基本信息, 项目快捷运行脚本
readme.md 项目帮助文件
tsconfig.json 配置tsc --watch 检查规则
webpack.config.js 配置webpack打包
yarn.lock yarn保存每个依赖是哪个版本

• 完成所有页面
  • 01电商-首页
  • 02电商-分类列表页
  • 03电商-产品详情页
  • 电商-注册
  • 电商-提交订单页
  • 电商-登录
• 项目规范化
• webpack基础配置
  • 入口, 出口
  • 开发服务器
  • 插件
    • 清除输出目录
    • 使用模板构建构建页面容器
  • 配置支持脚本文件去后缀名['.js', '.jsx', '.ts', '.tsx']
• 支持TypeScript
  • 使用babel + TypeScript 配置react项目
    • 配置tsconfig.json只检查, 不输出
    • 配置webpack将.js .jsx .ts .tsx交给babel处理
    • 配置babel
      • @babel/preset-react
      • @babel/preset-typescript
      • @babel/preset-env
• less/sass 二选一
  • sass
    • sass module
      • 让所有文件都使用sass module
      • review 所有样式文件文件, 使其使用sass特性
        • index.module.scss
        • ...
    • 解决sass引用其他样式文件时, 被引用文件的url()无法正确处理的问题
    • 解决字体声明和字体相关类不能全部使用:global()的问题
• webpack能够正确的处理静态资源文件
  • 图片
  • 字体
  • css
    • css-loader
    • style-loader
• 编写readme.md
  • 主要描述更目录下文件夹是干什么用的
  • 描述项目应用了哪些技术, 哪些地方设计的比较好, 例如Logo模块
  • [次要] 描述src下文件夹是干什么用的
• 使用css module解决目前css命名冲突问题

在开发中, 第一个编译或者后续执行刷新后的每一次自动刷新 都会同时触发两个进程的操作

1. tsc --watch
2. webpack --config webpack.config.js

第一个负责ts的类型检查(其会遵循根目录/tsconfig.json中的规则进行检查) 第二个负责编译

在实际开发时, 大部分时间关注tsc --watch的进程即可, webpack --config webpack.config.js 只需要静默运行 摸摸编译即可

也就是说, 现在类型检查和编译没有关系了

那么也就是说在webpack.config.js中, 根本无需ts-loader, 在遍历流程中, 只需要babel即可

1. 解析.tsx中所有jsx, 并将解析后的代码交给下一个流程
2. 解析移交代码中的TypeScript为ES6标准的JavaScript, 并将解析后的代码交给下一个流程
3. 解析移交代码ES6标准的JavaScript, 解析为ES5标准的JavaScript