0202年了,我们需要尝试打造自己的工具链路 来更?偷懒?的开发?

最终示例

@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手册示例 (响应式的手机上也可以查阅)

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 输入账号密码

  1. package.json中的那么字段 起好一个没有重复的名字
  2. package.json中设置一个file字段是一个数组,里面填上打包生成的main.js
  3. npm publish 发布 (类似于demo的@magic-zhu私有包名如果不是付费用户 需要npm publish --access public)

完结撒花???

完整的目录结构

目录结构图片

结束语

水平有限,欢迎交流

demo 代码仓库 github.com/Magic-zhu/h…

如果觉得有用的话,欢迎star?。也可以偷懒直接fork然后去改造升级,打造自己的工具库。

下期 -> 从0开始打造自己的 偷懒-cli