如何开发一个npm包？

准备

1. 开发一个 webpack 打包自动生成文件列表清单功能的插件
2. 创建一个 npm 账号,主要用于包的管理（发布、更新、删除等操作）

注册 npm 账号

npm注册的时候经常会用户名不通过，最好字母+数字简单一些，例如：make666,还需要一个email邮箱用于接收验证。 npm账号注册传送门

创建项目

1. 可以在 gitlab、github、gitee 上新建项目~clone到本机之后执行npm init补充信息
2. 执行 git clone 项目到本地
3. 执行 npm init -y 之后会自动生成package.json文件，字段如下：

// package.json
{
  "name": "包的名称",
  "version": "包的版本，默认是1.0.0",
  "description": "包的描述。主要描述你的包是用来做什么的。",
  "main": "入口文件",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "包的git仓库地址，npm自动读取`.git`目录作为这一项的默认值"
  },
  "keywords": ['包的关键词。该项会影响到用户怎样才能搜到你的包，可以理解为搜索引擎的关键词。'],
  "author": "作者名称",
  "license": "开源协议类型"
}

现在我们项目如下,我们看图会发现 package.json 里面的 name 字段带了@xxx/create-file-list, 这主要是为了一会发私有包用的，这样一会发包也不用考虑是否和别人的包重名。

私有包命名格式：@npm用户名/自己的项目名

现在我们就可以发一个初始版本到npm包管理平台去试下了

1. 执行 npm login， 按照提示的步骤输入用户名、密码、邮箱。

   登录的时候记得切换成npm镜像在登陆！,可以安装 nrm 包来切换源

   npm install -g nrm // 全局安装nrm包
   nrm ls // 显示源列表
   nrm use npm 切换从npm源
   

2. 执行 npm publish --access public, 因为我们是私有包，正常包执行 npm publish 即可。

3. 通过下面截图我们发现确实发成功了，然后可以去 npm包管理平台查看

添加index.js功能逻辑文件

目录结构如下：

index.js内容如下：

// index.js

class CreateFileMd {

    static defaultOptions = {
        outputFile: 'file-list.md'
    }

    constructor(options={}) {
        console.log('createFileMd init')

        // 合并options参数暴露给插件方法
        // 这里可以做options参数验证， 可使用schema-utils资源包的validate方法 验证
        this.options = { ...CreateFileMd.defaultOptions, ...options }
    }

    // 在插件函数的 prototype 上定义一个 `apply` 方法，以 compiler 为参数。
    apply(compiler) {
        const pluginName = CreateFileMd.name

        // webpack 模块实例，可以通过 compiler 对象访问，
        // 这样确保使用的是模块的正确版本
        // （不要直接 require/import webpack）
        const { webpack } = compiler

        // Compilation 对象提供了对一些有用常量的访问。
        const { Compilation } = webpack

        // RawSource 是其中一种 “源码”("sources") 类型，
        // 用来在 compilation 中表示资源的源码
        const { RawSource } = webpack.sources

        // 绑定到 “thisCompilation” 钩子，以便进一步绑定到 compilation 过程更早期的阶段
        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
            // 绑定到资源处理流水线(assets processing pipeline)
            compilation.hooks.processAssets.tap({ name: pluginName, stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE}, (assets) => {

                // 遍历所有资源，生成 Markdown 文件的内容
                const content = Object.keys(assets).map((fileName) => `- ${fileName}`).join('\n')
                console.log(content)

                // 向 compilation 添加新的资源，这样 webpack 就会自动生成并输出到 output 目录
                compilation.emitAsset( this.options.outputFile, new RawSource(content) );
            })
        })
    }
}

module.exports = CreateFileMd

然后我们修改一下 package.json 文件的版本再发布一下我们的包到npm

1. 修改 package.json 文件的版本方式如下：

   • 手动修改，例如：1.0.0 改为 1.0.1，1.0.0 改为 1.1.0
   • 执行 npm version patch, 修改的是最后一位 (升级补丁版本号)
   • 执行 npm version minor, 修改的是第二位 (升级小版本号)
   • 执行 npm version major, 修改的是第一位 (升级大版本号)

2. 然后我们再执行 npm publish ，再去npm包管理平台看下，我们的 version 已经变了

现在我们这个包的功能也有了，那我们怎么验证这个包呢

如果我们每次验证包功能的时候都先发布到npm，这肯定是不合理的，我们可以使用 npm link 的方式进行包的验证。

1. 在包的根目录下面执行 npm link
2. 比如需要在a项目下测试，可以在a项目下执行 npm link 包的name

// 包的根目录下 
npm link 

// 需要测试的目录下 
npm link @memory13/create-file-list

关联Git仓库发布

我们开发完一个包，每次都要 git push 一次仓库，然后再 npm publish 一次npm，这样比较麻烦，而且这两个地方可能版本还对应不上，所以我们可以设置git仓库和npm包版本同步，我们修改 package.json 如下:

// package.json
{
  "name": "@memory13/create-file-list",
  "version": "2.0.1",
  "description": "webpack打包自动生成文件列表清单功能的插件",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "patch": "npm version patch && git push --follow-tags && npm publish",
    "minor": "npm version minor && git push --follow-tags && npm publish",
    "major": "npm version major && git push --follow-tags && npm publish"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:zhigangzhang1/create-file-list.git"
  },
  "keywords": [
    "webpack",
    "生成文件列表清单"
  ],
  "author": "",
  "license": "ISC"
}

我们看到再scripts下面增加了 patch、minor、major的命令， 这样我们每次发布的时候只需要执行下面三个命令种的一个即可，而且会自动给git仓库打tag版本，这样git仓库和npm包管理平台版本就可以一一对应

// 根据自身需求三选一
npm run patch  // 升级补丁版本
npm run minor  // 升级小版本
npm run major  // 升级大版本

添加README.md文件

最后我们来添加README.md文件，增加一些包的说明，让大家使用的时候知道怎么用这个包

至此，我们就开发完了一个自己的npm包