This is the 26th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Vuex 4 Source Code Learning Notes – What can we learn by building (8)

Vuex’s NPM run build command is used to find out how Vuex is built step by step. Finally, Vuex uses the Rollup package tool to package the code in 6 versions:

  • Dist /vuex.esm-browser.js: For import use via native ES modules (use in browsers via

  • Dist/vuex.esM-browser.prod. js: Same as above, as the production version.

  • Dist/vuex.esM-Bundler.js: ES modular approach introduces import vuex from ‘vuex’ for webpack, rollup and Parcel build tools, no compressed version is available (packaged and compressed with the rest of the code).

  • Dist /vuex.global.js: Development version introduced in browser CDN mode

  • Dist /vuex.global.prod.js: production version introduced by browser CDN

  • Dist /vuex.cjs.js: CommonJS module approach introduces const vuex = require(‘vuex’), which is rendered on the Node.js server side by require().

Each product corresponds to a different use platform.

Once the packaging is complete, it is released, and today we will take a step-by-step look at how Vuex is launched.

As usual, from package.json, we can find a release command

"scripts": {
  / /...
  "release": "node scripts/release.js"./ /...
},
Copy the code

You can see that the node scripts/ relex.js file is actually running, and in this file, you first import the dependencies you need to use, then the constant variables and utility functions you need to use.

const fs = require('fs') // node.js is a module used to manipulate files
const path = require('path') // node.js is the module used to handle file paths
const chalk = require('chalk') // Chalk is used to output strings with styles in the terminal
const semver = require('semver') // Semantic versifier for NPM, specifically for version numbers
const { prompt } = require('enquirer') // It is used to interoperate input or selection in the terminal
const execa = require('execa') // Used to run various commands in Node.js
const currentVersion = require('.. /package.json').version // Get the version number in package.json

// Version increment mode
const versionIncrements = [
  'patch'.'minor'.'major'
]

/ / version of the tag
const tags = [
  'latest'.'next'
]

// Version increment method
const inc = (i) = > semver.inc(currentVersion, i)
// Run dependencies in node_modules
const bin = (name) = > path.resolve(__dirname, `.. /node_modules/.bin/${name}`)
// Run the specified command on the terminal
const run = (bin, args, opts = {}) = > execa(bin, args, { stdio: 'inherit'. opts })// Output the configuration information on the command line
const step = (msg) = > console.log(chalk.cyan(msg))

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

main().catch((err) = > console.error(err))
Copy the code

First, the Enquirer tool’s Select selector lets us select the version number to update from the command line

let targetVersion

const { release } = await prompt({
  type: 'select'.name: 'release'.message: 'Select release type'.choices: versionIncrements.map(i= > `${i} (${inc(i)}) `).concat(['custom'])})Copy the code

Patch, Minor, and Major are the major version, minor version, and patch version respectively. Semver tool is used to generate the corresponding version number. If you do not select this option, you can also select Custom

? Select the release type... ❯ Patch (4.0.3) Minor (4.1.0) Major (5.0.0) CustomCopy the code

If we select Custom, the Enquirer tool’s Input function lets us enter the version number ourselves.

if (release === 'custom') {
  targetVersion = (await prompt({
    type: 'input'.name: 'version'.message: 'Input custom version'.initial: currentVersion
  })).version
} else {
  targetVersion = release.match(/ / / ((. *) \)) [1]}Copy the code

It then verifies that the selected live input version number is valid

if(! semver.valid(targetVersion)) {throw new Error(`Invalid target version: ${targetVersion}`)}Copy the code

“Latest” is the latest version of the current library, and “next” is the next version. When NPM installs vuex, “latest” will be installed. When I install NPM install vuex@next I install the next version

const { tag } = await prompt({
  type: 'select'.name: 'tag'.message: 'Select tag type'.choices: tags
})
Copy the code

And then you do a double check to avoid misoperation

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

if(! tagOk) {return
}
Copy the code

Next, run all tests before publishing

// Run tests before release.
step('\nRunning tests... ')
await run('yarn'['test'])
Copy the code

Then, update the version version number in package.json

// 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')}Copy the code

Next, run YARN Build to package the Vuex code, which is the six versions described yesterday

// Build the package.
step('\nBuilding the package... ')
await run('yarn'['build'])
Copy the code

Then, generate the Changelog. md file through Yarn Changelog, which is what is updated for each version

// Generate the changelog.
step('\nGenerating the changelog... ')
await run('yarn'['changelog'])
Copy the code

And then there’s a second confirmation

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

if(! changelogOk) {return
}
Copy the code

Next, git Add and Git commit

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

Then, publish to NPM

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

Tag the code and submit it to GitHub

step('\nPushing to GitHub... ')
await run('git'['tag'.`v${targetVersion}`])
await run('git'['push'.'origin'.`refs/tags/v${targetVersion}`])
await run('git'['push'])
Copy the code

At this point, the Vuex release is complete. More questions are welcome.

Learn more front-end knowledge together, wechat search [Xiaoshuai’s programming notes], updated every day