npm 创建功能模块上传网络库、引用使用的简单教程

278 阅读3分钟

这里根据个人理解简单介绍下npm 创建功能模块上传到网络库并引用使用的过程。

大神,请直接跳到文章底部点个赞,非常感谢。

问题一:node.js是干什么的?

个人理解:node.js 是一个服务器js运行环境。网上有个比较获赞高的回答,仅为一句话:脱离浏览器的js运行环境。浏览器有自身的js运行环境(这里不讨论用的什么js引擎),如果前端开发人员对于运用js去处理逻辑能做到游刃有余,那么为什么不能把js运行环境放到服务器上,以供前端开发人员进行服务器逻辑开发?这样是不是就可以更好的发挥程序员的作用。

不仅是将js引擎放到服务器上,并且还扩展了一些新语法的,就形成了node.js。

问题二:npm是干什么的?

每个开发语言应该都有第三方库管理工具,可以理解npm就是node的第三方库管理工具。

对应追求科学严谨的看客们,对于这样的回答或许不屑一顾。但是对于初入门径的人来说,如何在浅显语言里更好的理解“它”是什么,个人觉得尤为重要。

废话不多说,直接上逻辑

步骤1、创建新项目

创建一个名为“wsl-date-manage”文件夹,终端打开,执行 npm init 命令:

image.png

后面会有一些终端提示操作,基本的信息填写,按照相关操作进行输入即可。完成后会生成一个package.json 文件。如图:

image.png

下面新建一个index.js 文件 里面实现一个简单的日期打印方法。

image.png

在终端下运行index.js 执行命令:node index.js

image.png

这里可一看到打印出了“2021-06-22”。

下面将这个小功能打成包,打包前将最后一句的打印变成导出指令。

image.png 执行打包操作,终端输入指令:npm pack

image.png

在本地引用这个包,这里在创建一个npmDemo工程,安装一下本地包:

cd 进入npmDemo工程 执行指令:npm install /Users/ganggu/Desktop/wsl-date-manage/wsl-date-manage-1.0.0.tgz

image.png

这时看一下node_modules文件夹包就导入进来了:

image.png

使用一下这个包

image.png

运行结果

image.png

上传npm网络库,www.npmjs.com/

没有账号的需要在上面的网址注册账号;在终端执行登陆操作:npm adduser

发布

执行 npm publish;这里需要注意切换npm源的问题,一般都会切换为淘宝源,所以发布的时候会提示没有权限,需要先切换到npm源,发布完成之后在切换为淘宝源;

npm config set registry registry.npm.taobao.org

npm config set registry registry.npmjs.org

最后显示发布成功:

image.png

引用一下这个网络库

image.png

添加成功,直接引用调用一下,前面由于有本地的引用,测试之前最好把本地的引用库uninstall 下,保险起见,可以先把之前的库更改一下路径,防止npm加载的还是本地库:

image.png

image.png

到这里简单的npm 库的创建、本地引用、网络库引用就完成了。

结尾:到这里基本的思路就讲完了,没有太复杂的逻辑,表达能力有限。希望对大家能有帮助,同时也接受大神们的批评指正,共同进步。