准备
- 开发一个
webpack打包自动生成文件列表清单功能的插件 - 创建一个
npm账号,主要用于包的管理（发布、更新、删除等操作）
注册 npm 账号
npm注册的时候经常会用户名不通过，最好字母+数字简单一些，例如：make666,还需要一个email邮箱用于接收验证。 npm账号注册传送门
创建项目
- 可以在
gitlab、github、gitee上新建项目~clone到本机之后执行npm init补充信息 - 执行
git clone项目到本地 - 执行
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包管理平台去试下了
-
执行
npm login， 按照提示的步骤输入用户名、密码、邮箱。登录的时候记得切换成npm镜像在登陆！,可以安装nrm包来切换源npm install -g nrm // 全局安装nrm包 nrm ls // 显示源列表 nrm use npm 切换从npm源 -
执行
npm publish --access public, 因为我们是私有包，正常包执行npm publish即可。 -
通过下面截图我们发现确实发成功了，然后可以去 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
-
修改
package.json文件的版本方式如下：- 手动修改，例如：
1.0.0改为1.0.1，1.0.0改为1.1.0 - 执行
npm version patch, 修改的是最后一位 (升级补丁版本号) - 执行
npm version minor, 修改的是第二位 (升级小版本号) - 执行
npm version major, 修改的是第一位 (升级大版本号)
- 手动修改，例如：
-
然后我们再执行
npm publish，再去npm包管理平台看下，我们的version已经变了
现在我们这个包的功能也有了，那我们怎么验证这个包呢
如果我们每次验证包功能的时候都先发布到npm，这肯定是不合理的，我们可以使用 npm link 的方式进行包的验证。
- 在包的根目录下面执行
npm link - 比如需要在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包
