从 0 开始写一个 npm module

发布于 2021-01-13 18:12:02 字数 3235 浏览 1562 评论 0

公司大了，团队大了以后，自然会出各种产品，即各种项目。而我们知道，每个项目其实都有很多共同的代码可以复用。复制粘贴这种重复劳动当然每个人都很讨厌，而且还有操作失误的情况。常用函数封装、正则、组件等，都可以做成 npm module 发布到 npm 上，方便所有的项目使用。

基础

基础的命令和操作就不介绍了，资料太多，当然还是最推荐官方的教程，教程地址戳我>>。

管理

在做自己的 module 之前，不得不说说怎么管理 module 这个项目。npm 本身并没有版本管理的能力，我们 publish 什么，npm 上就是什么。因此，很显然，我们需要 Git 来管理我们的 npm module。
团队合作的时候，如果是多人维护一个 npm module，npm publish 的权限建议只能是一个人，比如是创建这个 module 的人，我们暂且叫他Tom。其他人，包括Tom，对module的所有修改，先push到Git上，然后由Tom做code review。当Tom觉得OK、没问题了以后，合并代码，然后npm publish到npm。
总结一下，我们通过这两点来管理：

git
单人 npm publish

实现

接下来，我们从0开始，一步步地实现属于我们的 npm module，过程中，我们会遇到webpack的配置，读者可以不用太理解webpack部分，应该更多关注npm方面，不过如果对webpack配置有兴趣或者疑问，可以评论留言哦。OK，让我们开始吧~

一、创建git项目

这里我们选用 github，首先创建项目：

然后本地 clone 代码。

二、初始化npm

npm init

依次输入 package name，version，description，git repository 等。
有两个需要注意：

package name 如果是公共 module，取一个独一无二的名字就好了，如果我们想创建一个私有的module（基本每个稍微大点的公司团队都有private 的 npm module），那就得以@开头，然后跟上公司名或者团队名，再用/分割，最后接模块名字，比如@xkeshi/utils，然后只有加入这个私有项目的成员才有权限npm安装@xkeshi/utils这个包。其实关于public和private，即共有和私有的区别，文章开头的“基础”部分推荐的教程里也讲的很清楚了。
git repository 填 github 项目地址（默认就是）。
我们继续，按照 npm 一路的提示填好资料后，我们会有一份package.json生成，里面就是我们刚才填写的信息。

三、创建入口文件

在npm init的时候，在填entry point的时候，我们如果选择默认的话就是index.js。那就在根目录创建一个index.js吧。

四、写两个功能

首先创建一个文件夹加src，然后里面创建两个文件夹，第一个就叫mathematic，里面封装一些数学函数；第二个叫regex，里面就是一些常用的正则。目录结构为：

├── README.md
├── index.js
├── package.json
└── src
    ├── mathematic
    │   ├── README.md
    │   └── index.js
    └── regex
        ├── README.md
        └── index.js

具体的math和regex代码我就不介绍了，文章最后会附上项目地址，读者可以自己查看。