乐趣区

关于前端:validatenpmpackagename-源码学习

jiezi

用法

validate-npm-package-name 这个 npm 包的作用就是验证项目名称 (npm 包名) 是否非法，很多的 cli 工具都有应用。例如

vue-cli: https://github.com/vuejs/vue-…

create-react-app: https://github.com/facebook/c…

vue-cli 的用法如下 

const result = validateProjectName(name)
// 名字不非法
if (!result.validForNewPackages) {
  // 输入错误信息
  console.error(chalk.red(`Invalid project name: "${name}"`))
  result.errors && result.errors.forEach((err) => {console.error(chalk.red.dim("Error:" + err))
  })
  result.warnings && result.warnings.forEach((warn) => {console.error(chalk.red.dim("Warning:" + warn))
  })
  // 完结过程
  exit(1);
}

测试用例

测试用例只有一个文件，
https://github.com/npm/valida…

这里列举了各种用例，当没有文档时，能够通过这些用例初步理解这个包的用法，而且还能够晓得作者想要设计的性能。

复制两个用例看下 

// 不能以 . 结尾
t.deepEqual(validate('.start-with-period'), {
  validForNewPackages: false,
  validForOldPackages: false,
  errors: ['name cannot start with a period']})

// 不能以 _ 结尾
t.deepEqual(validate('_start-with-underscore'), {
  validForNewPackages: false,
  validForOldPackages: false,
  errors: ['name cannot start with an underscore']})

咱们开发本人我的项目时，能够先写测试用例，再围绕这些用例进行实现，这样能够进步代码的稳定性。未来减少性能时，这些测试用例能够帮忙咱们对旧性能进行验证，防止牵一发而动全身。

源码

从 package.json 中能够理解到本库的入口文件 index.js

  // package.json
  // ...
  "main": "index.js",
  // ...

从 index.js 的内容中能够发现该我的项目只有这一个 js 文件 https://github.com/npm/valida…

'use strict'

// 用于匹配 scope package，例如 @vue/reactivity
var scopedPackagePattern = new RegExp('^(?:@([^/]+?)[/])?([^/]+?)$')
// node 内置模块名组成的列表
var builtins = require('builtins')
// 黑名单 (保留字)
var blacklist = [
  'node_modules',
  'favicon.ico'
]

// 入口函数
var validate = module.exports = function (name) {
  // 正告：用于示意过来容许、现在不容许的 package name
  var warnings = []
  // 存储不符号合格的包名的规定
  var errors = []

  // 格局校验
  if (name === null) {errors.push('name cannot be null')
    // 应用 done 函数结构返回值
    return done(warnings, errors)
  }

  if (name === undefined) {errors.push('name cannot be undefined')
    return done(warnings, errors)
  }

  if (typeof name !== 'string') {errors.push('name must be a string')
    return done(warnings, errors)
  }

  // name 长度不能为 0
  if (!name.length) {errors.push('name length must be greater than zero')
  }

  // name 不能以 . 结尾
  if (name.match(/^\./)) {errors.push('name cannot start with a period')
  }

  // name 不能以 _ 结尾
  if (name.match(/^_/)) {errors.push('name cannot start with an underscore')
  }

  // name 不能蕴含前空格或后空格
  if (name.trim() !== name) {errors.push('name cannot contain leading or trailing spaces')
  }

  // No funny business
  // name 不能为保留字
  blacklist.forEach(function (blacklistedName) {if (name.toLowerCase() === blacklistedName) {errors.push(blacklistedName + 'is a blacklisted name')
    }
  })

  // Generate warnings for stuff that used to be allowed

  // core module names like http, events, util, etc
  // name 与 node 内置模块名雷同，则生成正告
  builtins.forEach(function (builtin) {if (name.toLowerCase() === builtin) {warnings.push(builtin + 'is a core module name')
    }
  })

  // really-long-package-names-------------------------------such--length-----many---wow
  // the thisisareallyreallylongpackagenameitshouldpublishdowenowhavealimittothelengthofpackagenames-poch.
  // name 不能超过 214 个字符
  if (name.length > 214) {warnings.push('name can no longer contain more than 214 characters')
  }

  // mIxeD CaSe nAMEs
  // name 不能有大写字母
  if (name.toLowerCase() !== name) {warnings.push('name can no longer contain capital letters')
  }

  // name 不能蕴含特殊字符 ~'!()*
  if (/[~'!()*]/.test(name.split('/').slice(-1)[0])) {warnings.push('name can no longer contain special characters ("~\'!()*")')
  }

  if (encodeURIComponent(name) !== name) {
    // Maybe it's a scoped package name, like @user/package
    // 解决 scope package，比方 @vue/reactivity
    var nameMatch = name.match(scopedPackagePattern)
    if (nameMatch) {var user = nameMatch[1] // vue
      var pkg = nameMatch[2] // reactivity
      if (encodeURIComponent(user) === user && encodeURIComponent(pkg) === pkg) {
        // scope package 没有异样，间接返回
        return done(warnings, errors)
      }
    }

    // name 存在 non-url-safe 的字符
    errors.push('name can only contain URL-friendly characters')
  }

  return done(warnings, errors)
}

// 将匹配 scope package 的正则也进行导出
validate.scopedPackagePattern = scopedPackagePattern

// 通过 warnings，errors 结构返回值
var done = function (warnings, errors) {
  var result = {
    validForNewPackages: errors.length === 0 && warnings.length === 0,
    validForOldPackages: errors.length === 0,
    warnings: warnings,
    errors: errors
  }
  if (!result.warnings.length) delete result.warnings
  if (!result.errors.length) delete result.errors
  return result
}

以上则是 validate-npm-package-name 源码局部，性能还是比较简单。

总结

不理解该库之前，间接读源码是十分迷茫的。这时能够先读测试用例，理解这个库的基本功能。

理解完基本功能之后能够从 package.json 动手，寻找入口文件并联合测试用例进行浏览。

从源码中学到能够从 builtins 获取 Node 内置的模块。以及我的项目开发标准，先制订需要（编写测试用例）再围绕测试用例进行开发，实现需求。

心愿文章的内容能为你提供一丝丝帮忙，如有谬误，还望斧正。

退出移动版