NPM包简单制作并发布

120 阅读3分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

npm是前端开发从业者使用较多的一种包管理工具,npm上面管理着数以百万计的全球各地开发者开源的各种各样的功能包。通常情况下,我们都是作为使用者的角色直接从npm服务器下下载别人编写的第三方包到本地使用。今天我们来尝试一下从开发者的角度来自定义一个简单的包上传(或者更新)到npm,并通过npm将其下载到新项目中使用。

注册 npm 账号

对于新手来讲,我们需要先去npm 官网注册一个账号,注册需要输入用户名、密码、邮箱。注册完成后,官网会给我们指定的邮箱发送验证邮件,根据邮件的提示完成验证操作即可。

注册完成之后一定要先去邮箱进行验证,否则你的 npm 账号不能发布 npm 包(发布时会报错)。

制作 npm 包

当前我们的目的是学习 npm 包的发布操作,所以我们只需要制作一个最简单的 npm 包做演示即可。

  1. 新建文件夹yuan-npm-test-demo
  2. 进入yuan-npm-test-demo文件夹,在当前文件路径的命令行下执行npm init,这个过程可以一路回车,这样包名和文件夹名是相同的(即yuan-npm-test-demo)。
  3. 在该文件夹下新建index.js文件,并输入如下内容。
export.run = function() {
    console.log("这是一个run方法")
}

将包上传或更新至 npm

  1. 要上传包首先需要登陆npm,打开命令行执行:npm login,然后输入 npm 官网的账号、密码和邮箱。
  2. 登陆成功后执行:npm public 来发布上传自定义的包。
  3. 发布成功之后即可在 npm 官网上查到包是否存在。
  4. 当想要在已发布的包中添加一些东西,只需要在更改完代码之后,先修改版本号,然后在命令行执行npm loginnpm publish即可。

在新项目中使用已发布的包

  1. 创建一个新的文件夹,如 test;
  2. 在 test 文件夹中执行npm init;
  3. 使用 npm 下载发布的包:npm i yuan-npm-test-demo;
  4. 在 test 中新建 index.js 文件,使用yuan-npm-test-demo;
const yuanNpm = require("yuan-npm-test-demo");
yuanNpm.run();
  1. 在命令行执行命令:node index.js,即可看到输出。

npm publish报错解决方案

  1. npm 官网注册完成账号之后,是否进行了邮箱验证,如果没有,一定要先进行邮箱验证;
  2. 检查淘宝镜像是否是:http://registry.npmjs.org/,如果不是,可以根据下面的命令行进行设置;
npm config set registry http://registry.npmjs.org/
  1. 检查包名是否被使用过,如果被使用过,则需要修改包名(即 package.json 中的 name),重新npm publish
  2. 如果是更新已发布的包,则检查版本号(即 package.json 中的 version)是否更新,更新后重新npm publish