Vuex 4源码学习笔记 - Vuex是如何发布的（九）

最新推荐文章于 2024-04-01 19:56:30 发布

原创

最新推荐文章于 2024-04-01 19:56:30 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vuex #源码

本文详细介绍了Vuex的构建过程，包括通过Rollup打包生成的六个不同版本，以及发布流程。从package.json的release命令开始，讲解了如何选择版本更新、生成版本号、执行测试、打包代码、生成CHANGELOG.md、提交改动到Git，最后发布到npm和GitHub的完整步骤。整个过程旨在确保发布无误并清晰理解Vuex的发布机制。

在上一篇笔记中：Vuex 4源码学习笔记 - 通过build我们能学习到什么（八）

我们通过Vuex项目的npm run build命令，来一步步的找到Vuex是如何构建的，最后可以看到，Vuex通过Rollup打包工具将代码主要打包了6个版本：

dist/vuex.esm-browser.js：用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type="module"> 来使用)。开发版本。
dist/vuex.esm-browser.prod.js：同上，作为生产版本。
dist/vuex.esm-bundler.js：ES模块方式引入 import Vuex from 'vuex'，用于 webpack，rollup 和 parcel 等构建工具，不提供压缩版本 (打包后与其余代码一起压缩)。
dist/vuex.global.js：浏览器CDN方式引入的开发版本
dist/vuex.global.prod.js：浏览器CDN方式引入的生产版本
dist/vuex.cjs.js：commonjs模块方式引入 const Vuex = require('vuex')，通过 require() 在 Node.js 服务器端渲染使用。

每个产物对应着不同的使用平台。

打包完成后，就是发布，今天我们来一步步看Vuex是如何发布的。

老规矩，还是从package.json看起，我们可以找到一个release的命令

"scripts": {
   
   
  //...
  "release": "node scripts/release.js",
  //...
},

可以看到实际运行的是node scripts/release.js文件，在文件中，首先引入需要用到的一些依赖，然后用到的一些常量变量和一些工具函数。

const fs = require('fs') // Node.js专门用来操作文件的模块
const path = require('path') // Node.js用来处理文件路径的模块
const chalk = require('chalk') // chalk 用来在终端内输出带有样式的字符串
const semver = require('semver') // npm 的语义版本器, 专门来处理版本号
const {
   
    prompt } = require('enquirer') // 用来在终端中进行输入或者选择的交互操作
const execa = require('execa') // 用来在Node.js中运行各种命令
const currentVersion = require('../package.json').version // 获取package.json中的版本号

// 版本递增方式
const versionIncrements = [
  'patch',
  'minor',
  'major'
]

// 版本tag
const tags = [
  'latest',
  'next'
]

// 版本递增方法
const inc = (i) => semver.inc(currentVersion, i)
// 运行node_modules内的依赖
const bin = (