从0到1打造类似lodash的工具库

最新推荐文章于 2024-04-11 15:45:39 发布

Orange301511

最新推荐文章于 2024-04-11 15:45:39 发布

阅读量662

点赞数

分类专栏：大前端文章标签： es6 javascript webpack node.js

本文链接：https://blog.csdn.net/LQS5858/article/details/116199319

版权

大前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文档介绍了如何构建一个JavaScript工具库，包括使用webpack、Babel、docdash等进行打包和文档生成，以及使用jest进行测试。通过示例函数展示了如何创建带logo的二维码，并提供了完整的项目目录结构和npm发布流程。

摘要由CSDN通过智能技术生成

项目用到的三方库

一个简单的表格是这么创建的：

包名	用途	备注
webpack5.x.x	用来打包构建js	详情查看官方文档
@babel/preset-env	babel相关	详情查看官方文档
docdash	jsdoc生成文档主题	文档样式
jest	测试库	具体用法查看文档
jsdoc	自动生成js api文档	不错
cp-cli	复制文件	详情查看文档
qrcode	生成二维码	详情查看文档

步骤

新建文件夹ricardoTools，初始化项目

npm init

根据提示完成相应步骤，生成package.json文件

新建工具函数文件夹src

该文件夹用来存放所有的工具函数js文件，每个js文件按jsdoc规则书写注释，这个注释用来自动生成api文档
示例函数：

import QrCode from 'qrcode'

/**
 * @description
 * <span style="color:red;font-weight:bold">基于qrcode二次开发,生成带logo的二维码</span>
 * |输入值|输出
 * |---|---
 * |二维码内容|二维码dom
 * |页面canvas对象|二维码dom
 * |logo图片dom|二维码dom
 * |配置options|二维码dom
 * @param {String|Object} content -生成canvas的内容
 * @param {Object} canvas -页面canvas对象
 * @param {dom} imgDom -logo图片dom
 * @param {Object} options -二维码配置
 * @return {Object} -生成二维码dom
 * @version 1.0.2
 */

class RicardoQrcode {
    constructor(content, canvas, imgDom, options = {
        width: 200,
        height: 200,
        margin: 0
    }) {
        this.content = content
        this.canvas = canvas
        this.imgDom = imgDom
        this.options = options
    }
    //logo转canvas
    imgToggleCanvas = () => {
        const canvas = document.createElement('canvas');

        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, 40, 40);		//先画一个40*40的正方形，颜色#ffffff，此处因为logo图片四周没有留白
        ctx.drawImage(this.imgDom, 4, 4, 32, 32);		//将 32*32 的 logoImg 画到 canvas 上
        return canvas;
    }
    //生成logo的canvas与二维码合并
    mergeCanvas = (generateCanvas) => {		//生成的二维码 canvas	
        // const { qrcodeCanvas } = this.$refs;
        const logoCavans = this.imgToggleCanvas();		//第2步里面的转换后的canvas
        const canvas = document.createElement('canvas');
        canvas.width = generateCanvas.width;
        canvas.height = generateCanvas.height;
        canvas.getContext('2d').drawImage(generateCanvas, 0, 0);	//将 generateCanvas 画到 canvas 上，坐标 0，0
        canvas.getContext('2d').drawImage(logoCavans, 80, 80);	//将 logoCavans 画到 canvas 上，坐标 80，80
        this.canvas.width = canvas.width;
        this.canvas.height = canvas.height;
        this.canvas.getContext('2d').drawImage(canvas, 0, 0);
    }
    ricardoQrcode = () => {
        return new Promise((resolve, reject) => {
            QrCode.toCanvas(this.content, this.options).then(el => {
                this.mergeCanvas(el)
                resolve("二维码生成成功!")
            }).catch(e => {
                reject(`二维码生成失败,${e}`)
            })
        })
    }
}


export default RicardoQrcode

新建打包文件夹build

在build下新建webpack.config.js文件


const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') //压缩js
const pkg = require('../package.json')
const uppercamelcase = require('uppercamelcase') //命名改成大驼峰命名
const name = uppercamelcase(pkg.name)

module.exports = {
    entry: {
        btTools: path.resolve(__dirname, '../index.js'),//非压缩文件
        'btTools.min': path.resolve(__dirname, '../index.js')  //min.js为压缩文件
    },
    output: {
        path: path.resolve(__dirname, '../libs'),
        filename: '[name].js',  // [name] 替换entry下面的名字
        library: name,
        libraryTarget: "umd",  //改模式支持node，import，script引入方式
    },
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader', exclude: [path.resolve(__dirname, '../node_modules')] }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new UglifyJSPlugin({
                include: /\.min\.js$/
            })
        ]
    },
    mode: 'production'
}

新建生成文档的配置文件jsdoc.config.json

使用jsdoc帮助我们生成api文档说明，具体用法可以查看官方文档

{
    "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"
    }
}

配置打包的script命令

"scripts": {
    "docs": "jsdoc --configure jsdoc.config.json",
    "build": "webpack --config build/webpack.config.js & yarn docs & yarn cp:file",
    "cp:file": "cp-cli ./docs/bt-tools/1.0.2  ./dist"
  },

配置babel编译es6代码

新建.babelrc文件

{
   "presets": [
     [
       "@babel/env",
       {
         "corejs": "3.6.5",
         "useBuiltIns": "usage"
       }
     ]
   ],
   "plugins": [
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties"
   ]
 }