前言  

在前端,基于NodeJs的工程化开发已经是一个很成熟的解决方案,而工程化的构建又离不开诸多便捷又高效的可复用的NPM包,那么这些包是如何制作、发布的呢?今天我们就来研究一下这个问题。

  什么是NPM?  

NPM 是 NODE 的模块管理器,它包括安装、卸载、更新、查看、发布等功能,是前端工程化能够获得巨大成功的重要原因之一,关于NPM相关的知识,本文就不赘述了,有兴趣的读者可以前往官网学习相关的资料。官方网站:https://www.npmjs.cn/

  初始化开发环境  

node模块就是发布到npm的代码包,我们通常使用 npm 自带的命令初始化 node 模块的环境。

初始化的过程中会提示输入模块的相关信息,其中比较重要的是名字和版本号,模块名字是其他人安装时候的唯一ID标识,而版本号则是 node 模块的版本控制编号。完成初始化后,会在本机生成一个 package.json 文件,它是管理模块的信息集合:

还需要在package.json 同目录下创建一个 index.js,在这个文件中暴露出这个 node 模块的对外接口:

到这里,一个最简单 node 模块就已经开发完成了。

  命令行命令定义  

我们创建一个node 模块后,如果只是通过 main 暴露 node 模块的接口,那么其他人就只能使用模块引用的方式来使用,但是在一些情况下,我们不想做二次开发,而是希望直接通过命令行的方式来使用 node 模块的内容,比如说各种脚手架、SCSS编译等等。好在 node模块提供了一种命令行定义的方法,bin 字段:

在package.json 的 bin 字段中,我们定义安装后可由命令行执行的命令,其中,key 值是命令的名称,是我们在命令行中调用的命令ID,value 值是在执行命令后执行的 js 地址,它等同于直接用 node 运行该 js:

我们来看下 ./bin/trace.bin.js文件里面的内容:它和index.js 中的内容没有区别,只是两种不一样的路子,命令行其实是对 index.js 内容的封装,index.js 是对外暴露的接口。

  调试  

我们完成模块开发后,怎么才能知道我们的包是否按照指定的规则正常运行了?同时怎么调试相关的代码?方法其实有不少,我就列三种:1.直接用相对路径按照使用:2.发布临时的本地测试包:3.发布一个正式现网的 beta 包:这条我就列着,反正我不用!(方法同正式包发布,只是版本号区分)

  添加 README.md  

readme 文件还是需要的,它主要用于该项目模块的说明、使用方法等,在此我们不做深究,大家可以参考 markdown 的一些语法。markdown官网:https://markdown-zh.readthedocs.io/en/latest/

  发布  

我们的node 模块开发完成后,需要发布到线上才能够让其他人使用,使用 npm 发布其实很简单,步骤如下:1.到https://www.npmjs.com上注册一个账号;2.在命令行中输入添加用户命令,根据提示,输入相关的用户名、密码、邮箱:

3.最后在项目文件夹中输入发布命令(package.json同目录):到这一步就完成发布了,其他人可以通过 npm 安装这个 node 模块,使用index.js 中暴露的方法了:

  • 调用模块暴露的接口

  • 直接使用命令行调用

至此,一个有功能齐全的NPM包就制作、发布完成了!

npm 卸载_手把手教你创建一个NPM包相关推荐

  1. python k线合成_手把手教你写一个Python版的K线合成函数

    手把手教你写一个Python版的K线合成函数 在编写.使用策略时,经常会使用一些不常用的K线周期数据.然而交易所.数据源又没有提供这些周期的数据.只能通过使用已有周期的数据进行合成.合成算法已经有一个 ...

  2. react项目_保证一看就会 | 手把手教你创建一个React项目

    一.如何使用 git 在 GitHub 上创建一个项目 新建一个项目 首先,在github上注册自己的账号,然后登录后,可以看到如下界面,是你的主页.点击右边的➕号,选择第一个选项 填写项目信息 此时 ...

  3. npm收录了哪些包_手把手教你制作一个小而美丽的 npm 包并发布

    第1步:npm账户 你需要一个 npm 账户,如果米有,注册地址是:npmjs.com/signup 第2步:登录 进入你自己电脑的终端(cmd)并输入: npm adduser 也可以使用以下命令: ...

  4. vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  5. java编写一个框架_手把手教你写一个基于 RxJava 的扩展框架

    背景 现在 RxJava 在 Android 开发中可谓时炽手可热,其受欢迎程度不言而喻,也因此在 github 上出现了一系列的基于 RxJava 的框架,如 RxBinding.RxPermiss ...

  6. maven 创建java项目_手把手教你创建Java Maven依赖项目

    本教程介绍了如何通过MyEclipse Web项目,或者其他任何Maven项目来创建一个通用的Java/Maven项目.这些步骤包括基础的创建和使用Maven依赖.您将学习到: 创建一个Maven实用 ...

  7. 手把手教你发布一个Python包

    本文主题如下: 编写一个包(Python 源代码),但不是本文的重点. 编译包,观察编译后的文件. 发布包,发布的包可以有多种类型. 如何在 Pypi 中查看已发布的包. 注意: 本文编写的包在 Py ...

  8. uniaccess安全助手卸载_手把手教你卸载电脑的流氓软件(每天一个小知识)

    阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,不代表 ...

  9. linux npm安装_手把手教你appium框架的搭建—linux

    总体来说,分为以下几步: 1.安装jdk 2.安装node和npm 3.安装android sdk 4.安装appium 5.安装pip及appium-python-client 以下是脚本 #!/b ...

最新文章

  1. 深入理解JAVA序列化
  2. mybatis 解析Integer为0的属性,解析成空字符串
  3. 在主窗体中打开一个新子窗体,如果已有子窗体,则激活它,而不打开新的。...
  4. android app应用后台休眠,安卓手机锁屏后程序自动关闭,怎么设置手机app允许锁屏后台运行...
  5. 【kafka系列】kafka之生产者发送消息实践
  6. 《软件需求十步走》阅读笔记5
  7. 自定义 Web 服务器控件
  8. python for 格式化字符串 list.count
  9. javaScript = == ===的区别
  10. Revit (6) - Teigha - LayerTable
  11. html所有的标签,html所有标签超详细概述
  12. c++运行错误: string subscript out of range
  13. 程序猿怎样选择机械键盘
  14. html中如何放音乐 和视频播放器,HTML5培训之HTML5音乐播放器和视频播放器分享
  15. Unity 涂涂乐(不使用shader)
  16. Lambda表达式的学习
  17. 报错:java.lang.ClassNotFoundException: Cannot find implementation for解决方法
  18. 腾讯安全发布《BOT管理白皮书》|解读BOT攻击,探索防护之道
  19. 【科普】ESP32 内部温度传感器示例
  20. MySQL——MySQL高可用之PXC

热门文章

  1. 每日一皮:你有没有过 Bug 变 Feature 的高光时刻?
  2. Spring Boot 2.x基础教程:使用JdbcTemplate访问MySQL数据库
  3. 月薪8k 和 月薪28K的程序员差距在哪里?
  4. 控制cpu_设备管理 设备控制方式
  5. php5.2的配置方,Windows IIS PHP 5.2 安装与配置方法
  6. php non numeric,PHP 7.1 的 A non-numeric value encountered 错误和解决方法
  7. requests.exceptions.TooManyRedirects: Exceeded 30 redirects
  8. ubuntu安装protobuf
  9. ElasticSearch Python Client ReadTimeout
  10. 用于阴影检测的 DSC 特征