自己写工具包发布到npm流程

系统管理员 2022-09-01 14:54 185阅读 0赞

把通用的功能开发成npm包，便用使用和维护，更重要的是可以分享给广大的开发者，是不是很激动人心！

那么，步骤如下：

1.创建项目

创建项目目录，npm init ，根据需要输入配置信息（建完后也可以在package.json中自行修改）

npm init

控制台如图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70][]

生成一个package.json文件 如图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1][]

配置项

name: 说明了npm包的名称，也就是publish后可以在npmjs中通过该名称搜索到

version：版本号

main：入口文件

2.创建index.js文件，内容如下:

function addZero(num) {
      return num > 9 ? num : '0' + num
    }
    
    let formatter = {
      date: null,
      init(date) {
        try {
          if (date) {
            this.date = new Date(date)
          }
        } catch (error) {
          console.info(error)
        }
      },
      getDateTime () {
        let date = this.date || new Date()
        let res = ''
        res = date.getFullYear() + '-' + addZero(date.getMonth() + 1) + '-' +addZero(date.getDate())
        + ' ' + addZero(date.getHours()) + ':' + addZero(date.getMinutes()) + ':' + addZero(date.getSeconds())
        return res
      },
      getDate () {
        return this.getDateTime().split(' ')[0]
      },
      getTime () {
        return this.getDateTime().split(' ')[1]
      }
    }
    
    module.exports = formatter

module.exports = formatter意思是把formatter输出。
    
    3.测试
    创建test-formatter.js,导入index并使用其中的方法

let formatter = require('./index') // 导入
    formatter.init('2018-6-9')
    console.info(formatter.getDateTime())

命令行输入 node test-formatter.js  执行，结果为：

![83ce823d08ea401b3d825b9cdc3f62ff.png][]

4.测试没有问题，那么需要创建一个ReadMe文件进行说明

主要包含：

介绍，安装方法，github地址，使用示例

# datetime-format-ydx-1991
    格式化时间，获取2019-08-07 15:06:32或2019-08-07或15:06:32
    
    # install
    npm install -g datetime-format-ydx-1991
    
    #github
    https://github.com/15011164760/npmDemoStudy.git
    
    #usage
    let formatter = require('./index')
    formatter.init('2018-6-9')
    console.info(formatter.getDateTime())

此时项目的目录结构如下：

![36cc4c36456791072e028611893d1fc5.png][]

5.下面就可以发布了

先要有一个npm账号，，如果没有请到 [https://www.npmjs.com][https_www.npmjs.com] 注册

命令行输入：

npm login

根据提示依次输入用户名、密码，登录成功后会显示用户名。

命令行输入：

npm publish

![114a0e97d8aa18ed6b37a0f55e73f7c6.png][]

完成发布。

如果是因为使用了淘宝镜像导致publish不成功，可以按如下步骤操作：

npm i -g nrm

nrm use npm

再次npm publish

6.使用

发布成功后就可以在npmjs中搜索、也可以安装使用了。

在npmjs搜索的结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 2][]

安装：

命令行输入：npm install datetime-format-ydx-1991 --s

![20210728193642755.png][]

安装完成后项目目录下会增加package-lock.json描述了该包的信息：

{
      "name": "web",
      "version": "1.0.0",
      "lockfileVersion": 1,
      "requires": true,
      "dependencies": {
        "datetime-format-ydx-1991": {
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/datetime-format-ydx-1991/-/datetime-format-ydx-1991-1.0.1.tgz",
          "integrity": "sha512-1HF0k1nKll2dFA2PwApr8uP/CwnbCF/OdVrrEv2A46v7GmnJ/CtlCLIv65gVFBECy41nfXuOPySRu6Y/qWen6A=="
        }
      }
    }

在test-format.js中使用

let formatter=require('datetime-format-ydx-1991');
    formatter.init()
    console.info(formatter.getDateTime())

结果：

![20210728194054384.png][]

（另外，使用node运行js文件，文件改动后不会自动更新，需要重复运行node命令，

可以使用nodemon代替，自动重启，提升效率，

安装：npm install -g nodemon

使用： nodemon filename.js）

代码github地址：

https://github.com/15011164760/npmDemoStudy.git

仅介绍npm包开发与发布的流程，如有问题请不吝赐教，欢迎留言交流~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70]: /images/20220829/577fd0314661498c834667f9bd1c2420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 1]: /images/20220829/683f98239f0743de9cb79306c50d7313.png
[83ce823d08ea401b3d825b9cdc3f62ff.png]: /images/20220829/06cc71cb31294b6ab9c744fd2803d581.png
[36cc4c36456791072e028611893d1fc5.png]: /images/20220829/a5e2bff440ec4f86b6bd690b47f834cf.png
[https_www.npmjs.com]: https://www.npmjs.com/
[114a0e97d8aa18ed6b37a0f55e73f7c6.png]: /images/20220829/a8346a7e9d5644dc86eda7c8ea3fa03b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NTA3OTAy_size_16_color_FFFFFF_t_70 2]: /images/20220829/334d6c96c97040059c315fc462697422.png
[20210728193642755.png]: /images/20220829/83e905a68f294538a6fc52e811e84632.png
[20210728194054384.png]: /images/20220829/f3d7895b3fba4f2b99eecf6e306b7091.png