原生 node 搭建最基础的 npm 工具包

2022-04-15 14:59:39 浏览数 (1)

本文会简单介绍一下 npm,如果着急进食,请跳过 「 1 npm 」这节。

1 npm

1.1 npm简介

相信有兴趣点进本文的读者都大概知道 npm 是什么。

以下是来自 w3cnpm 的介绍。

NPM 是随同 NodeJS 一起安装的包管理工具,能解决 NodeJS 代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
  • 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。

也就是说,使用 npm 就需要安装 node

node 可从 node官网 下载对应系统的版本直接安装即可。

1.2 注册 npm 账号

要制作自己的 npm 工具包,首先需要注册一个 npm 的账号。

可在 npm官网 进行注册。

1.3 查看和切换 npm 源

可以使用 nrm 工具查看和切换 npm

nrm 安装命令

代码语言:javascript复制
npm install nrm -g

查看当前使用的 npm

代码语言:javascript复制
nrm ls

第一项前面有个 * 号,证明当前使用的是第一项(npm)

如果需要切换源,可以使用下面这条命令(这里以 taobao 为例)

代码语言:javascript复制
nrm use taobao

切换成功会出现上图的提示。

此时再次使用 nrm ls 查看,可以看到已经成功切换到 taobao 源了。

但本文是讲解如何把工具包发布到 npm 上,所以请切换回第一项 npm

2 开始搭建脚手架

2.1 初始化项目

首先创建项目目录(文件夹),本文以 xzy-test 为例。

打开终端,进入项目,使用以下命令初始化项目

代码语言:javascript复制
npm init -y

初始化成功后,项目根目录下会出现 package.json 文件。

在项目根目录下创建 bin 目录,然后在 bin 目录下创建 index.js

这里就是我们要编码的地方,但编码在下一节再写,这里主要是整理好目录结构。

然后通过 package.json 文件对项目进行配置

代码语言:javascript复制
{
  "name": "xyz-test",
  "version": "0.0.1",
  "description": "",
  "bin": {
    "xyz-test": "bin/index.js"
  },
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

这里主要加了 bin 这段,意思是使用 xyz-test 这个命令就会执行 bin/index.js

2.2 编码

打开 bin/index.js ,输入以下内容。

代码语言:javascript复制
#!/usr/bin/env node
console.log('Hello ZYX')

第一行 #!/usr/bin/env node 是必须写,这句的作用是安装脚手架后会自动在全局环境中找到 node 帮忙执行代码。

第二行是功能代码,如果是模块包的话可以根据开发环境编写。

2.3 登录npm

需要在 npm官网 进行注册。

在登录之前需要保证你现在使用的 npm源 是指向 npm 的。可以往上拉查阅 「 1.3 查看和切换 npm 源 」操作。

在终端使用一下命令登录

代码语言:javascript复制
npm login

然后根据提示输入账号、密码和邮箱即可。

2.4 发布

打开终端,进入项目根目录输入以下命令即可发布。

代码语言:javascript复制
publish

发布成功后,可以登录 npm官网 查看到刚刚发布的项目。

2.5 迭代需要修改版本号

如果项目更新需要重新发布,必须修改 package.json 里的版本号。

版本号只能不断往上增加。

代码语言:javascript复制
"version": "0.0.2"

3 使用脚手架

3.1 下载

npm 网站中,打开刚刚发布的项目,可以看到右侧有安装命令提示。

代码语言:javascript复制
npm install xyz-test -g

加上 -g 表示全局安装

3.2 使用

在终端输入以下命令

代码语言:javascript复制
xyz-test

3.3 删除

代码语言:javascript复制
npm uninstall xyz-test -g
#或
npm remove xyz-test -g

0 人点赞