从零搭建React脚手架

一个现代前端工程，如同建筑工程一样，好的脚手架能为开发提效。在阶段一二中，我们并没有提及脚手架，实际上我们的前端开发还处于刀耕火种阶段，而搭建一个好的脚手架则是前端工程化的一大步。其实在此之前，我们在可扩展的Markdown解析器中，已经接触到前端的工程化的东西，包括单元测试，代码风格约定等，只不过之前的配置可能并不能复用，而把工程配置复用化就是脚手架的真实含义。不过话说回来，前端工程的脚手架可比JS库的脚手架配置要复杂地多，它还会涉及到资源（图片，SVG）的处理，E2E测试的配置等等。

前置

请先学习webpack

可参考的模板

• https://github.com/react-boilerplate/react-boilerplate
• https://github.com/react-boilerplate/react-boilerplate-cra-template

可参考的文章

• 从零搭建完整的React项目模板

要求

• 单元测试：使用Jest，配置测试覆盖率工具
• 端到端测试：可以选择配置Cypress或者Selenium
• Lint
  • 配置ESLint，并添加代码风格（Airbnb的JavaScript编程规范，JavaScript标准代码风格等等）
  • CSS代码风格检查
• 架构：添加技术架构依赖（MobX或者Redux）
• Webpack
  • 配置Babel
  • 配置CSS，Less，Sass，PostCSS
  • 处理图片
  • 处理雪碧图（非必要）
  • 配置SVG插入，SVG雪碧图等（非必要）
  • 添加打包分析工具webpack-bundle-analyzer
• 多环境：多环境变量，多环境启动（开发，提测，生产等环境）