1.
名称 | 模板框架 | 多选项生产 | 支持自定义模板 | 特点 |
Create-React-App | React | 否 | 是 | React 官方维护 |
Vue CLI | Vue | 是 | 是 | Vue官方维护 |
脚手架模板
在实际开发中，我们可以通过创建脚手架对应的模板对项目进行「定制化处理」。
定制化模板可以「弥补」官方提供基础工具集不满足特定需求的场景。
定制化有如下优点(但有不仅限这些优点)
- 为项目引入「新的」通用特性
- 针对构建环节的
webpack配置优化，来提升开发环境的效率和生产环境的性能等 - 定制符合「团队内部规范」的代码检测规则配置
- 定制单元测试等「辅助工具模块」的配置项
- 定制符合团队内部规范的「目录结构与通用业务模块」
- 业务组件库
- 辅助工具类
- 页面模板
我们简单的为CRA配置一个最简单的模板。
为 CRA 创建自定义模板
作为一个最简化的 CRA 模板，模板中包含如下必要文件
README.md：用于在npm仓库中显示的「模板说明」package.json：用于描述模板本身的「元信息」， 例如名称、运行脚本、依赖包名和版本等template.json：用于描述基于模板创建的项目中的package.json信息template目录：用于「复制」到创建后的项目中，gitignore在复制后重命名为.gitignore,「public/index.html和src/index 为运行 react-scripts 的必要文件」
在使用时，还是需要将模板通过 npm link 命令「映射」到全局依赖中或发布到 npm 仓库中。
然后执行创建项目的命令
SourceMap
Source Map:「映射」转换后的代码与源代码之间的关系
一段转换后的代码，通过转换过程中生成的 Source Map 文件就可以「逆向解析」得到对应的源代码。
Source Map是一个 JSON 格式的文件，这个 JSON 里面记录的就是「转换后和转换前」代码之间的映射关系。
Source Map 的基本原理
在编译器(Babel/SWC)编译处理的过程中，在生成产物代码的同时,也生成产物代码中被转换的部分与源代码中相应部分的「映射关系表」。
有了完整的映射表，就可以通过 Chrome 控制台中的"Enable Javascript source map"来实现调试时的显示与定位源代码功能。
Source Map 处理插件
根据不同规则，实际上 Webpack 是从三种「插件」中选择其一作为 source map 的处理插件。
EvalDevToolModulePluginEvalSourceMapDevToolPluginSourceMapDevToolPlugin
优化处理
- 定向引入
- 效果最佳的方式是在「导入声明时只导入依赖包内的特定模块」
- 使用插件
适用于
antd,antd-mobil,lodashbabel-plugin-lodashbabel-plugin-import
注意点
Tree Shaking，这一特性也能减少产物包的体积,但是 Tree Shaking 需要相应导入的依赖包使用 ES6 模块化,而 lodash 还是基于 CommonJS ,需要替换为 lodash-es 才能生效
Tree Shaking 是在优化阶段生效,Tree Shaking 并不能减少模块编译阶段的构建时间。