npm包封装--公共方法工具库

429 阅读2分钟

由于每个项目中都会有一个utils.js的公共函数文件,而每个项目中有百分之80是可以复用这些方法的,就想将这些公共的函数方法给封装成npm,尽量做到代码的复用最大化。

需要先确定的事情:

编写方面:

  • 使用typescript进行编写
  • 使用ES6的export命令显式指定输出的代码,方便直接使用import进行引用

项目配置方面:

  • 需要将ts转为js

准备阶段

npm会在安装node时默认安装上

  • 注册npm账号

开始

新建一个npm项目

npm init or npm init -y后会自动生成package.json文件。

npm init -y 会使用默认配置
npm init 会需要在创建时就进行一些配置
具体的配置项可以根据npm官网进行配置:https://www.npmjs.cn/

由于需要使用typescript进行编写,所以我们需要再安装typescript和ts-node两个依赖。

npm install typescript 安装ts依赖
npm install ts-node 可以让我们无需编译直接在Node.js上直接编译ts

然后我们就生成了一个基础的package.json文件:

{
  "name": "npm_demo",
  "version": "1.0.0",
  "description": "公共方法工具库",
  "main": "index.js",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  }
}

进行基本的项目配置

配置tsconfig.json文件:

{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": false, 
  },
  "include": ["main"],
  "exclude": ["node_modules","./dist"]
}

以上的配置项根据自己的真实需要进行配置即可。

项目文件夹部分如图所示:

image.png 主要代码的编写在main文件夹下,打包出来的代码在dist文件中。

npm的发布

npm publish --access=public将包进行发布,值得注意的是每次发布记得修改版本号。

此时,我们可以在npm官网上查找我们上传的项目名字了,如果可以查到,就说明发布成功啦。同时我们可以在一个项目中npm install 项目名去进行依赖的安装和最基础的使用了。

思考

我们的包这样发布成功后就完全结束了吗?是否要进行一些扩展?是否项目引用了这个包之后打包出来的大小会受影响?

答案当然是没有结束。

值得考虑的点:

问题解决方案
是否允许用户去选择用ECMAScript模式或者CommonJS模式的方式进行引用?可使用bable进行代码转换,然后package.json配置入口
引用该组件库后,只使用了该库中的部分方法,其他未使用的代码是否也会被打包?可使用摇树优化

这篇主要讲如何发布一个npm工具库,下一篇讲最后的工具库优化~~~请大佬们多多指教!!