一行代码统一规范

我正在参与掘金会员专属活动-源码共读第一期，点击参与

前言

看到这个标题，可能有些小伙伴会有点惊讶：一行代码统一规范？！确实，当时看到这个标题时，我也比较好奇如何做到一行代码统一规范，毕竟真正到了一个庞大的项目中去，如何做好代码规范是一个比较常见的问题。于是便学习了若川大佬的这篇文章 从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器。

一行代码统一规范

如何实现一行代码统一规范呢？这里需要借助到 only-allow 这个库。这个库从它名字上的字面意思来来理解就是强制在项目上使用特定的包管理器。

根据它的 Readme 文件里的用法可以知道，如果要强制使用 npm，就添加：

{
  "scripts": {
    "preinstall": "npx only-allow npm"
  }
}
复制代码

如果要强制使用 cnpm，就添加：

{
  "scripts": {
    "preinstall": "npx only-allow cnpm"
  }
}
复制代码

如果要强制使用 pnpm，就添加：

{
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  }
}
复制代码

源码解读

我们找到 only-allow 的入口文件 bin.js 文件。

它的源码并不多，前前后后总共四十行左右，阅读起来还是比较轻松的。代码部分如下：

const whichPMRuns = require('which-pm-runs')
const boxen = require('boxen') 
const argv = process.argv.slice(2)
if (argv.length === 0) {
  console.log('Please specify the wanted package manager: only-allow <npm|pnpm|yarn>')
  process.exit(1)
}
const wantedPM = argv[0]
if (wantedPM !== 'npm' && wantedPM !== 'pnpm' && wantedPM !== 'yarn') {
  console.log(`"${wantedPM}" is not a valid package manager. Available package managers are: npm, pnpm, or yarn.`)
  process.exit(1)
}
const usedPM = whichPMRuns()
if (usedPM && usedPM.name !== wantedPM) {
  const boxenOpts = { borderColor: 'red', borderStyle: 'double', padding: 1 }
  switch (wantedPM) {
    case 'npm':
      console.log(boxen('Use "npm install" for installation in this project', boxenOpts))
      break
    case 'pnpm':
      console.log(boxen(`Use "pnpm install" for installation in this project.
If you don't have pnpm, install it via "npm i -g pnpm".
For more details, go to https://pnpm.js.org/`, boxenOpts))
      break
    case 'yarn':
      console.log(boxen(`Use "yarn" for installation in this project.
If you don't have Yarn, install it via "npm i -g yarn".
For more details, go to https://yarnpkg.com/`, boxenOpts))
      break
  }
  process.exit(1)
}
复制代码

跟着川哥的指引，然后我们再来看看 which-pm-runs 的源码。

'use strict'

module.exports = function () {
  if (!process.env.npm_config_user_agent) {
    return undefined
  }
  return pmFromUserAgent(process.env.npm_config_user_agent)
}
function pmFromUserAgent (userAgent) {
  const pmSpec = userAgent.split(' ')[0]
  const separatorPos = pmSpec.lastIndexOf('/')
  return {
    name: pmSpec.substr(0, separatorPos),
    version: pmSpec.substr(separatorPos + 1)
  }
}
复制代码

在这段源码里，它拿到 process.env.npm_config_user_agent 的值，并通 split() 对它进行了分割处理。可以看到它最终返回的是包管理器和版本号。

总结

今天通过源码学习，了解到了 only-allow 这个包，还是有点收获的。毕竟在多人协作开发的项目中，有一套合适的代码规范是是比较重要的。虽然现在还没有完全将它运用到真正的项目中，但是关于它的学习还在继续，关于前端工程化里的代码规范问题还在继续做学习，关于这方面的知识或者好资料欢迎小伙伴们在评论区里留言告诉我。