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

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

在上一篇笔记中：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 = (name) => path.resolve(__dirname, `../node_modules/.bin/${name}`)
// 在终端运行指定命令
const run = (bin, args, opts = {}) => execa(bin, args, { stdio: 'inherit', ...opts })
// 在命令行输出制定信息
const step = (msg) => console.log(chalk.cyan(msg))

async function main() {
  // ...
}

main().catch((err) => console.error(err))
复制代码

首先第一步，通过enquirer工具的select选择器，让我们在命令行中选择要更新的版本号

let targetVersion

const { release } = await prompt({
  type: 'select',
  name: 'release',
  message: 'Select release type',
  choices: versionIncrements.map(i => `${i} (${inc(i)})`).concat(['custom'])
})
复制代码

有三种版本递增规则分别为：patch、minor、major，分别为主要版本、次要版本、补丁版本，然后通过semver工具这个来生成相应的版本号。如果不选择，还可以选择custom进行自定义

? Select release type … 
❯ patch (4.0.3)
  minor (4.1.0)
  major (5.0.0)
  custom
复制代码

如果我们选择custom，会通过enquirer工具的input输入功能让我们自己输入版本号。

if (release === 'custom') {
  targetVersion = (await prompt({
    type: 'input',
    name: 'version',
    message: 'Input custom version',
    initial: currentVersion
  })).version
} else {
  targetVersion = release.match(/\((.*)\)/)[1]
}
复制代码

接着会校验选择的活着输入的版本号是否是合法的

if (!semver.valid(targetVersion)) {
  throw new Error(`Invalid target version: ${targetVersion}`)
}
复制代码

然后选择tag，tag有latest和next版本，latest一般为当前库的最新版本，next为下一个版本，一般当我们npm install vuex时安装的时候都是latest版本，当我安装npm install vuex@next安装的是next版本

const { tag } = await prompt({
  type: 'select',
  name: 'tag',
  message: 'Select tag type',
  choices: tags
})
复制代码

然后还会二次确认做一次二次确认，来避免误操作

const { yes: tagOk } = await prompt({
  type: 'confirm',
  name: 'yes',
  message: `Releasing v${targetVersion} with the "${tag}" tag. Confirm?`
})

if (!tagOk) {
  return
}
复制代码

接着，在发布之前运行所有的test

// Run tests before release.
step('\nRunning tests...')
await run('yarn', ['test'])
复制代码

然后，更新package.json中的version版本号

// Update the package version.
step('\nUpdating the package version...')
updatePackage(targetVersion)

function updatePackage (version) {
  const pkgPath = path.resolve(path.resolve(__dirname, '..'), 'package.json')
  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))

  pkg.version = version

  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
}
复制代码

接着，运行yarn build来打包Vuex代码，也就是昨天所说的6个版本

// Build the package.
step('\nBuilding the package...')
await run('yarn', ['build'])
复制代码

然后，通过yarn changelog生成CHANGELOG.md文件，也就是每个版本都更新哪些东西

// Generate the changelog.
step('\nGenerating the changelog...')
await run('yarn', ['changelog'])
复制代码

然后还会进行一次二次确认

const { yes: changelogOk } = await prompt({
  type: 'confirm',
  name: 'yes',
  message: `Changelog generated. Does it look good?`
})

if (!changelogOk) {
  return
}
复制代码

接着，进行git add和git commit提交操作

// Commit changes to the Git.
step('\nCommitting changes...')
await run('git', ['add', '-A'])
await run('git', ['commit', '-m', `release: v${targetVersion}`])
复制代码

然后，发布到npm上面

// Publish the package.
step('\nPublishing the package...')
await run('yarn', [
  'publish', '--tag', tag, '--new-version', targetVersion, '--no-commit-hooks',
  '--no-git-tag-version'
])
复制代码

将代码打上tag，并提交到GitHub

step('\nPushing to GitHub...')
await run('git', ['tag', `v${targetVersion}`])
await run('git', ['push', 'origin', `refs/tags/v${targetVersion}`])
await run('git', ['push'])
复制代码

至此，Vuex就发布完成了。有更多问题欢迎讨论。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新

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

Guess you like