使用自己的工具库
新建一个项目，再建一个js文件
在终端输入npm install learnjts
npm install learnjts
安装成功可以看到我们的项目里多了几个文件
在index.js文件里引入工具函数
有可能还会报 import 引入错误，解决方案和上面一样
此时可以看到可以正常打印出来数据类型，则说明
添加eslint 和 单元测试
添加一个README.md文档，来介绍自己的工具库
添加 eslint
既然写都写了，肯定要最好最全面的配置呀，所以我决定添加eslint
两种安装方式，一般选择第二种在当前项目安装
//方式一.全局安装 npm i -g eslint //方式二.当前项目安装 npm i -D eslint
使用命令配置并生成一个.eslintrc文件
npm init @eslint/config
命令行会有一些简单的配置，生成如下内容
module.exports = { "env": { "browser": true, "node": true, "es2021": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "rules": { } }
配置一下规则，可以在env里添加node,es6等
module.exports = { "env": { "browser": true, "node": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "rules": { "space-before-function-paren": 0, // 函数定义时括号前面要不要有空格 "semi": 0, // 语句可以不需要分号结尾 "eqeqeq": 1, // 必须使用全等 } }
可以在rules配置一些语法规则
module.exports = { "rules": { /* "off" -> 0 关闭规则 "warn" -> 1 开启警告规则 "error" -> 2 开启错误规则 */ "space-before-function-paren": 0, // 函数定义时括号前面要不要有空格 "semi": 0, // 语句可以不需要分号结尾 "eqeqeq": 2, // 必须使用全等 } }
此时再回到getDataType.js文件中去就会发现，没有使用全等的地方爆红了，修改后恢复到正常
添加单元测试jest
单元测试的执行通常需要测试规范、断言、mock、覆盖率工具等支持
jest是用来创建、执行和构建测试用例的 JavaScript 测试库，自身包含了 驱动、断言库、mock 、代码覆盖率等多种功能
安装
npm i --save-dev jest
把 jest 安装到项目后，在 package.json 添加配置
"scripts": { "test": "jest" }
这样就可以使用命令 npm test 执行测试代码了
创建一个test/getDataType.test.js文件来测试getDataType方法
import getDataType from '../src/getDataType.js'; test('getDataType(2)===number', () => { expect(getDataType(2)).toBe("number"); }) test('getDataType({a:1})===object', () => { expect(getDataType({a:1})).toBe("object"); }) 复制代码
此时你会发现，又有很多爆红
解决办法：在「.eslintrc.cjs」 配置"jest": true
在jest原生测试框架中，无法使用es6的import export语法，只能使用commonJS语法，可以使用下面的方式解决
step1: 在项目根目录下添加.babelrc文件
{ "env": { "test": { "plugins": ["@babel/plugin-transform-modules-commonjs"] } } }
step2:安装ES6语法解析转换插件
npm install --save-dev @babel/plugin-transform-modules-commonjs
此时再运行
npm test
可以看到我们的单元测试，成功通过
可以在「package.json」 里多加一个配置
"jest": { "collectCoverage": true },
会生成一个 coverage 报告
更新
更新之前必须要修改一下版本号，否则就会报错更新失败
因为之前登录过了，所以直接输入npm publish就可以了
npm publish
再次到npm官网查看自己的库就可以看到，已经更新到1.0.1版本了，并且README文档已经显示出来了
在项目中引入最新包
在终端输入npm install learnjts@latest
npm install learnjts@latest
此时可以看到版本已经更到最新了
这就是我搭建一个自己的JS工具库的全部过程了，其中我遇到的问题和解决方案也都有讲解。但是毕竟经验不足，可能会有一些不对的地方或者局限性，仅供参考
learnjts工具库既然已经写出来了，其中也写了一些方法。下一步就准备使用vuepress2.x搭建一个文档，方便查阅和使用
learnjts文档也已经搭建好了，☞使用vuepress搭建learnjts文档详细步骤
learnjts项目源码和地址在这里☞github项目地址 |npm项目地址
