npm包(发布、运行、调试)经验总结

·  阅读 3842

npm包(发布、运行、调试)经验总结

目的:

从0到1做一个npm包,来体验npm包发布、运行、调试相关流程。

步骤:

1 做什么

做一个将手机号码、用户名加*的功能。
举例:13012345678 ---> 130****5678
这个的功能实现很简单,目的就是为了体验整个npm发包的流程。

2 实现功能搭建package框架

2.1 整体框架

|bin
--index.js   #命令行
|script
--index.js   #npm脚本
|src
--index.js   #相关代码
package.json  
.gitignore
README.md
.npmignore   #npm的ignore文件
复制代码

知识点 npmignore

.npmignore类似.gitignore的文件,在上传npm包的时候,里面的文件会被过滤掉。

2.2 src/index.js

src/index.js用于实现功能

/**
 * @param {*} str 11位 
 */
function mobileAsterisk(str) {
  if (str.length !== 11) {
    const err = new Error("字符串长度不是11位");
    throw err;
  }
  const start = str.slice(0, 3);
  const end = str.slice(7);
  const result = `${start}****${end}`;
  return result;
}

module.exports = {
  mobileAsterisk
};

复制代码

2.3 bin/index.js

bin/index.js用于命令行工具相关脚本

#!/usr/bin/env node

const { mobileAsterisk } = require("../src/index")
const num = process.argv[2];
console.log(mobileAsterisk(num))
复制代码

bin目录下的文件夹是用于执行命令行相关脚本。

知识点 shebang:

通过标记 #!/usr/bin/env node 让机器知道该文件是通过node 运行的

shebang 相关资料 

知识点 处理命令行参数:

处理命令行参数可以使用:
1)直接使用process.argv解析参数,第一个参数是node位置,第二个参数是脚本位置,之后的参数是输入的,具体参见node文档。process_argv node文档
2)使用commander.js解析相关参数 commander.js中文文档

2.4 package.json

{
  "name": "addasterisk",
  "version": "1.0.3",
  "description": "给手机、邮箱、账户等添加星号(*) | 还在完善中",
  "main": "src/index.js",
  "repository": "https://gitee.com/yatsov/AddAsterisk.git",
  "author": "yatsov <yatsov@163.com>",
  "license": "MIT",
  "private": false,
  "bin": {
    "asterisk":"bin/index.js"
  },
  "scripts": {
    
  }
}
复制代码

知识点1 bin:

里面配置用于调用命令行的文件,有时候我们希望写的包,可以像命令行一样运行这里就需要bin配置项。bin配置项相当于在文件与命令行之间建立了一个映射。简单来说,它会在./node_modules/.bin/  或者node_global_path(可以使用npm root 命令查看)\bin 中建立一个软连接(symlink)。

1 bin配置相关文档 docs.npmjs.com/files/packa…
2 npm root命令 docs.npmjs.com/cli/root.ht…
3 别忘了在类linux系统中加shebang,参加2.3

另外,如果你bin配置直接写一个文件名(像下面的那个文件配置一样),那么命令行名称会和工程名一样。

{
  "name": "my-program",
  "version": "0.0.1",
  "bin": "./path/to/cmd 
}
复制代码

3 如何测试

在包写的差不多了之后需要进行测试。这里可以使用npm link命令来进行调试,避免频繁发包的痛苦,还可以在本地来测试安装效果。 步骤是首先把自己写的模块映射到全局

 # 先去到模块目录,把它 link 到全局
 cd my-package-path
 npm link
复制代码

之后在准备好的测试包中通过npm link 连接测试包

 # 再去项目目录通过包名来 link
 cd my-test-project-path
 npm link my-package-name
复制代码

如果要删除link的包那么

 npm unlink my-package-name
复制代码

相关文献 :
1  github.com/atian25/blo…
2 npm link docs.npmjs.com/cli/link.ht…

4 npm如何发包

测试完成之后就可以准备发包

4.1 预备步骤

准备一个git仓库储藏相关包,准备一个npm账户。

4.2 nrm管理相关源

nrm是个好工具,可以用来管理自己的npm源。 几个命令:
1 使用nrm ls 可以列出已经有的npm源。

image.png
2 使用nrm use <名称>可以切换对应的地址 这一步需要切换到指定的npm源。

4.3 npm登录

使用npm login命令登录。

image.png

4.4  npm发包

在工程位置使用npm publish发包。 

image.png

完成!

这样你就可以将包推到npm了。 www.npmjs.com/package/add…

🐈 欢迎批评指正!!!! 🐈

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改