持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

开发指南

版本号: v1.0.0

命令说明

• serve | 本地调试
• build | 预发(生产) 环境编译命令, 可在当前命令上附加 --disable-sentry 关闭 sentry, 来进行本地编译测试.
• build:staging | 开发 & 测试 环境编译命令
• analyzer | 执行编译性能分析
• test | 执行全局的 jest 单元测试
• lint | 执行 eslint 检查
• lint:fix | 执行 eslint 检查, 并尝试修复问题
• format | 使用 prettier 格式化当前项目.
• upgrade2 | 框架更新升级
• feature | 按照填写表单, 创建新的开发分支
• release | 提交发布, 包含操作: git fetch -> 创建tag -> git push -> git push tag

约定式配置

为了我们能通过一致性框架来维护前端项目, 我在这套框架内, 做了一些通用的抽象. 并且, 重新定义了一些约定

1. vue 通用配置
2. vue.config.js - 配置内容变更

• • 对于 vue 的配置, 原本计划在项目内进行抽象, 但考虑到后续的维护成本, 这里直接将 vue 配置从项目中抽象出去. 作为一个默认配置的方式引入项目.
  • 如果, 默认的配置不满足需求, 你可以在 vue.config.js 中, 通过覆盖变量方式, 对默认配置进行覆盖, 就如同代码中覆盖对象值一样.

3. 环境变量

• • 经过讨论, 环境变量目前阶段仍然采用环境变量方式配置, 但由于我们累计了不同的调试&部署配置, 导致使用官方配置方式 .env.* 会造成大量冗余, 故这套框架在 .env.* 基础上, 引入 @ysfe/envs 插件作为环境变量工具, 详细内容参考下方: 环境变量
  • 当然了, .env.* 配置仍旧有效, 不过关联的 命令需要进行调整.

4. lint 检查

• • 动态检查 style lint: 当项目根目录下存在 ./stylelintrc.js 时, 自动启用 stylelint 检测.

5. less 全局变量

• • 关于全局样式, 这套框架中进行了一点小改动, 我们不再使用 css.loaderOptions.less.globalVar 方式, 写入全局样式属性. 而是, 通过 style-resource-loader 帮我们将 ./src/assets/**/variable.less 中的变量进行全局导入.
  • 关于样式文件夹命名, 插件采用扫描方式, 将./src/assets/(less|scss)/variable.(less|scss) 变量定义导入到其他的样式文件中。所以需要大家在写的时候, 注意目录定义和变量定义, 包含如下需求:

• • • assets 下, 第一个样式目录层级为 less or scss。
    • 需要导入的变量, 需要在 variable.(less|scss) 中定义, 在其他文件内定义无效.

6. 动态代理支持

• • 背景: 为了解决请求后端接口跨域问题, 我们在 webpack 的配置中, 引入了 proxy 帮我们转化请求参数. 但由于 webpack-dev-server 配置项关系, 我们切换代理时, 每次都需要重启应用. 为了解决这一问题, 这套框架引入了 动态代理 能力. 满足下方规则, 即可使用动态的接口代理能力.
  • 规则:

• • • 设置 baseUrl: 设置为: baseUrl: '/proxy'
    • 增加 header: { target: 'server api', referer: '源站地址' }, 在 Axios 初始化时, 将请求地址作为 header 参数写入

特性声明

- vue-cli5 遵循webpack NODE_ENV规则, 不再允许除 `development` 或者 `production` 以外的变量. 如果项目中需要使用到这两个以外的变量, 请替换为 `VUE_APP_ENV` 属性, 同时, 补充 `.env.*` 配置

webpack 插件策略

当默认扩展不满足怎么办?

// 示例如下
const config = require('@ysfe/vue-default-config').default


config.configureWebpack = (config) => {
	// 添加扩展配置
}
// 或者
config.configureWebpack = {
	// 遵循webpack配置规则即可
}

module.exports = config

性能分析

命令: 可以通过 yarn analyzer 执行编译性能分析.

smp - webpack loader 编译耗时

1. 由于 smp 提供的 plugin 分析能力与 vue 内置的 cross-webpack-plugin 等插件存在冲突, 所以 smp 的plugins分析能力在框架中被禁用. 原因如下:

* 由于使用 webpack-chain的缘故, 导致 无法使用 smp.wrap() 监听 plugin 配置失效.
* 当前, 也有解决办法, 比如: 覆盖 config.toString 来达到写入 smp.wrap 的目的, 但
* 由于 覆盖后, 会导致 compilation.hooks.htmlWebpackPluginAlterAssetTags.tap 抛出空指针异常, 故暂时放弃 plugin性能分析能力.
* 另外, 如果要单独针对某个插件耗时进行分析, 也可以通过 configureWebpack 加载插件进行测试.

2. 可提供分析报表:

1. 1. 总编译耗时
   2. 各文件编译耗时
   3. loader 组合总计
   4. ...

bundle-analyzer - 打包资源占比分析

其他说明

1. 相对于我们之前使用的框架, 这套统一的框架引入了更多的通用插件. 会拉低第一次npm install的速度, 大约 10s 左右(看网速). 但这部分时间, 通过编译时插件的优化, 由换了回来. 总体来看, 还是不错的.