马上2022年了，我们需要尝试打造自己的工具库😄
最终示例
@magic-zhu/helper这个是我们自己发布到npm的demo包
然后在项目中使用
npm install @magic-zhu/helper
const helper = require ('@magic-zhu/helper')
let {typeOf} = helper
console.log(typeOf('133')) //String生成的api手册示例 (响应式的手机上也可以查阅)
原料
| 包名称 | 用途 | 备注 |
|---|---|---|
| rollup | 类似于webpack的构建工具 | 为啥选择rollup 是因为它适合工具库 |
| @babel/preset-env | babel相关 | 详情可去官网查看 |
| babel-preset-latest | babel相关 | 详情可去官网查看 |
| docdash | 一款jsdoc生成文档的主题 | 好看😄 |
| jest | 大厂出产的测试工具库 | |
| rollup-plugin-babel | rollup插件 | 详情可去官网查看 |
| rollup-plugin-node-resolve | rollup插件 | 详情可去官网查看 |
| rollup-plugin-uglify | rollup代码压缩插件 | 具体可以去npm查看 |
| @babel/polyfill | babel相关 | |
| jsdoc | 通过特定的规范注释自动生成文档的工具 | 好东西 b（￣▽￣）d |
rollup因为本人全局安装了 所以不在包内
"devDependencies": {
"@babel/preset-env": "^7.8.4",
"babel-preset-latest": "^6.24.1",
"docdash": "^1.2.0",
"jest": "^25.1.0",
"minami": "^1.2.3",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4"
},
"dependencies": {
"@babel/polyfill": "^7.8.3"
},步骤
初始化项目
npm init根据相应的提示 填写完整内容 生成一个package.json文件
安装好相应的包
如上述原料中复制进package.json的文件中npm install安装好
新建工具函数文件夹(src)文件夹
这个文件夹用来存放要写的工具函数或者是类，每一个都是一个js文件。
然后写上看官心仪的函数😉,并写好注释 jsdoc的具体用法请参照官网 或者可以参照这个demo，不展开。
示例函数:typeOf.js
/**
* @description
* <span style='color:red;font-weight:bold'>检查某个数据的数据类型</span>
* |输入值|输出
* |---|---|
* |123|Number
* |'abcdef'|String
* |true|Bollean
* |[1, 2, 3, 4]|Array
* |{name:'wenzi', age:25}|Object
* |console.log('this is function')|Function
* |undefined|Undefined
* |null|Null
* |new Date()|Date
* |/^[a-zA-Z]{5,20}$/|RegExp
* |new Error()|Error
* @param {*} value - 输入值
* @param {String} [type] - 需要核对的数据类型，不填的时候则返回数据类型
* @return {Boolean|String} - 返回首字母大写的数据类型（ex：Number）或者布尔值
* @version 1.0.0
*/
const typeOf = function(value,type){
let r = typeof value
if (r !== 'object') {
if(type){
return r.charAt(0).toUpperCase() + r.slice(1,r.length) == type
}else{
return r.charAt(0).toUpperCase() + r.slice(1,r.length)
}
}else{
if(type){
return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1') == type
}else{
return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1')
}
}
}
export default typeOf
新建一个测试文件(__test__)文件夹
这里每个工具函数和库都需要写上测试用例，这个demo用的是jest,具体的用法请去官网查看，不展开。
示例
import typeOf from "../src/typeOf"
test('typeOf 123 should be Number', () => {
expect(typeOf(123)).toBe('Number')
})
//....此处省略配置一下package.json的script命令
"scripts": {
"test": "jest ./test",
},当我们 npm run test 可以看到如下的测试结果 🌚，不需要其他配置 jest会去跑test下所有的测试文件。很方便是不是(●ˇ∀ˇ●)
在项目根目录新建一个INDEX.JS为ROLLUP打包入口文件
里面的结构也很简单
import typeOf from "./src/typeOf"
//...以此类推
const helper = {
typeOf,
}
export default helper新建生成文档的配置文件 JSDOC.CONFIG.JSON
既然已经写好了工具库，为了方便自己及他人的查阅和使用。我们需要jsdoc来帮助我们生成文档。配置好主题docdash
具体的使用方法,可以去官方查阅。也可复制这个demo的。
{
"source": {
"include": [
"package.json",
"README.md",
"./src"
],
"includePattern": ".js$",
"excludePattern": "(node_modules/|docs)"
},
"plugins":["plugins/markdown"],
"opts": {
"destination": "./docs/",
"encoding": "utf8",
"private": true,
"recurse": true,
"template": "./node_modules/docdash"
}
}然后配置package.json的script命令
"test": "jest ./test",
"docs": "jsdoc --configure jsdoc.config.json",最后 npm run docs 就会生成文档啦
构建打包&压缩代码
新建一个rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import {uglify} from 'rollup-plugin-uglify';
export default {
input: 'index.js',
output: {
file: 'main.js',
format: 'cjs'
},
plugins: [
uglify(),
]
}配置package.json的script命令
"scripts": {
"test": "jest ./test",
"docs": "jsdoc --configure jsdoc.config.json",
"build": "rollup -c"
},
npm run build就可以压缩打包了，最后生成一个main.js就是最终的代码。
具体的打包规则可以有很多玩法，请去rollup官网查阅。
配置BABEL @_@ 如果我们要兼容一些老版本的浏览器
新建一个.babelrc
{
"presets": [
"@babel/env"
]
}这里rollup需要配合配置插件
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import {uglify} from 'rollup-plugin-uglify';
export default {
input: 'index.js',
output: {
file: 'main.js',
format: 'cjs'
},
plugins: [
resolve(),
babel({
exclude: 'node_modules/**'
}),
uglify(),
]
}发布到NPM
首先要有一个npm账号 在本地npm login 输入账号密码
- package.json中的那么字段 起好一个没有重复的名字
- package.json中设置一个file字段是一个数组，里面填上打包生成的main.js
- npm publish 发布 (类似于demo的@magic-zhu私有包名如果不是付费用户 需要
npm publish --access public)
完结撒花🌸🌸🌸
完整的目录结构
