前端开发必备技能知识笔记-自定义工具函数库，并上传npm

前言

项目中我们常常需要编写一些函数，用来处理 一些简单的逻辑，不同的项目中用到的工具函数大部门都是一样的，所以每个项目都要重复的添加这些函数，为了减少这部分重复劳动，我们可以创建一个工具函数库将复用率比较高的函数添加到这个库里面，还可以上传到npm，简化添加使用的步骤。

1、创建工具函数库项目

自己创建一个项目文件夹“user-defined-utils”（文件夹名称不要用中文的，不然后面的操作会报错），进入“user-defined-utils”项目文件夹执行以下命令

npm init -y

这个命令执行完会在当前文件夹下面生成一个package.json的配置文件文件

2、下载安装依赖包

需要同时安装webpack和webpack-cli

npm i webpack webpack-cli -D

3、配置webpack

手动添加webpack.config.js配置文件，配置内容如下

//引入nodeJs内置的path模块
const path = require('path');
module.exports = {
  // 模式
  mode: 'development', // 也可以使用 production，产品模式会对代码进行压缩
  // 入口
  entry: './src/index.ts', 
  // 出口
  output: {
    // 打包文件夹
    path: path.resolve(__dirname, 'dist'),
    // 打包文件
    filename: 'common-utils.js', 
    // 向外暴露的对象的名称
    library: 'utils',
    // 打包生成库可以通过esm/commonjs/reqirejs的语法引入
    libraryTarget: 'umd', 
  },
}

4、创建入口文件

上面webpack.config.js配置文件里面已经将入口文件设置为了“./src/index.ts”，但是现在项目中并没有这个文件，所以这一步将要在创建这个src文件夹下面的index.ts入口文件。

5、export（暴露）工具函数

入口index.ts文件的作用，就是将需要暴露出去被使用的工具函数，在这里import（引入）汇总，最后export出去。

src/index.ts文件内容

import displayUtils from './display/index';

export default  {
    displayUtils
}

6、配置打包命令

在package.json配置文件中添加打包命令

"build:watch": "webpack --watch"

Webpack-cli中的 watch工作模式,这种模式下项目中的文件会被监视，一旦当这些文件发生变化 就会自动重新运行打包任务
webpack 开启监听模式两种方式
1.启动webpack 命令时 带上--watch 参数
2.在配置webpack.config.js 中设置watch:true

7、打包项目

执行命令打包

npm run build:watch

打包完成会生成一个./dist/common-utils.js的文件，这个就是前面webpack.config.json配置文件中指定的打包文件夹“dist”和打包文件“common-utils.js”

8、发布工具函数库到npm

• name: 必须是唯一的名称(在npm在线中央仓库中没有同名的)
• main: 必须指定为打包生成的js文件
• keywords: 指定一些方便别的程序员搜索到当前库的关键字

发布到npm需要完善package.json配置文件的信息

{
  "name": "user-defined-utils",
  "version": "1.0.0",
  "description": "自定义工具函数",
  "main": "dist/utils.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:watch": "webpack --watch"
  },
  "keywords": [
    "geofly"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

上传到npm的具体操作可以参考花姐夫：前端开发必备技能知识笔记-将vue组件上传npm

9、使用自定义工具函数库

npm下载包

npm i user-defined-utils

“user-defined-utils”名称是你前面指定的库的名称

项目中使用

使用ESM引入

import { test } from 'user-defined-utils';

10、添加声明文件

在项目中引用上传的工具函数时，我发现没有智能提示，非常的不方便,这是缺少声明文件xx.d.ts。

TypeScript可以将大量变量的类型声明统一提取到单独的文件，此类文件被称为声明文件，它的文件扩展名是.d.ts，它可以被TypeScript解释器读取，并且能直观地表示出各种变量的使用方式。

安装 ts-loader

我们需要再打包的时候通过ts文件自动生成xx.d.ts文件，先安装ts-loader

npm install ts-loader --save-dev

添加配置tsconfig.json配置文件

{
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    //允许编译javascript文件
    "allowJs": true,
    //生成相应的 .d.ts文件
    "declaration": true,
    //重定向输出目录
    "outDir": "dist",
    //生成相应的.d.ts.map文件
    "declarationMap": true
  }
}

webpack.config.js文件中添加配置

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: [/node_modules/],
                loader: "ts-loader",
                options: {
                    configFile: "tsconfig.json"
                }
            }
        ]
    },

package.json配置文件中添加配置

指定声明文件的路径，必须指定，不然还是不会智能提示

"types": "dist/index.d.ts",

执行打包命令后，打包文件中有了.d.ts文件和.d.ts.map文件，自后在上传更新到npm

效果

没有指定index.d.ts类型声明文件时，没有智能提示

指定index.d.ts类型声明文件后，现在有了智能提示，nice!!

---

本文参考：

自定义工具函数库并发布到npm中央仓库_时光无声￡的博客-CSDN博客