上文我们已经完整的写了一个add函数和测试用例 还记得我们的目标吗 接着继续吧。。。
- 发布到npm仓库，可通过
pnpm install xxxx下载到本地使用 - 每个文件必须包含测试文件，保证代码质量
- 可通过import以及script标签来引用
通过import以及script标签来引用
修改package.json
{
"name": "@junxuan/js-tools",
"version": "1.0.0",
"description": "js-utils",
"type": "module",
"main": "./dist/js-tools.js",
"module": "./dist/js-tools.js",
"exports": {
".": {
"import": "./dist/js-tools.js",
"require": "./dist/js-tools.umd.cjs"
}
},
"author": {
"name": "junxuan"
},
"scripts": {
"test": "vitest",
"build": "vite build",
"doc": "typedoc"
},
"files": [
"dist",
"LICENSE",
"README.md",
"package.json"
],
"keywords": [
"composition",
"api",
"typescript",
"ts",
"type"
],
"license": "MIT",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"eslint": "^8.37.0",
"eslint-config-standard-with-typescript": "^34.0.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-n": "^15.0.0",
"eslint-plugin-promise": "^6.0.0",
"typedoc": "^0.23.28",
"typescript": "^5.0.3",
"vite-plugin-dts": "^2.2.0",
"vitest": "^0.29.8"
},
"dependencies": {
"vite": "^4.2.1"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
}
}
比较核心的几个字段：
type: 'module'用于定义package.json文件和该文件所在目录根目录中 .js文件和无扩展名文件的模块化处理规范，默认值为'commonjs'。就是你希望nodejs通过什么模块化来处理你的包 可选值是'commonjs' | 'module'这里我们显示的声明 'module'，也就是ESMmain：'./dist/js-tools.js'包的入口文件。就是别人引入你的包时候 首先会去找的那个文件"module": "./dist/js-tools.js",对应的esm module引入方式的入口文件exports这个可以配置不同环境对应的模块入口文件，并且当它存在时，它的优先级最高。
比如使用 require 和 import 字段根据模块规范分别定义入口：
"exports": {
".": {
"import": "./dist/js-tools.js",
"require": "./dist/js-tools.umd.cjs"
}
}
为啥要加一个 "." 呢 ，因为nodejs除了支持默认包的导出外，还支持子路径导出，例如：
"exports": {
"./style": "./dist/css/index.css'
},
这样在引入 index.css 时候 就可以用import 'packageName/style'了
调试
本地pnpm link 调试 大家应该都很熟悉吧
- 将本地包link到全局node_modules
pnpm link --global
- 在其他项目中执行
pnpm link --global {packageName}
我们新建一个简单的项目测试一下
index.mjs
import {addNumber} from '@junxuan/js-tools' // esm引入方式
console.log(addNumber(3, 4))
index.cjs
const {addNumber} = require('@junxuan/js-tools')
console.log(addNumber(9,6))
可以看出，当使用commonjs规范引入时，的确是进入了js-tools.umd.cjs 验证了配置入口是正确的
因为我们也同时打包了umd规范的输出文件，所以直接在script 标签引入也可以直接使用
npm 发布
这里就很简单了
pnpm login --registry https://registry.npmjs.compnpm publish
可能会让你输入一些验证之类的
至此，我们的目标基本已经完成了
总结
通过这个案例，完成了一个简单的包含测试用例的npm package的开发、调试、发布的流程。看似很简单，其实在写这篇文章的过程中，需要去做很多的验证。以前没注意到的细节，也会一一实践。果然【输出才是最好的学习方式】如果这篇文章能帮到你 希望能点个赞ღ( ´･ᴗ･` )
