本文已参与「新人创作礼」活动,一起开启掘金创作之路。
npm是前端开发从业者使用较多的一种包管理工具,npm上面管理着数以百万计的全球各地开发者开源的各种各样的功能包。通常情况下,我们都是作为使用者的角色直接从npm服务器下下载别人编写的第三方包到本地使用。今天我们来尝试一下从开发者的角度来自定义一个简单的包上传(或者更新)到npm,并通过npm将其下载到新项目中使用。
注册 npm 账号
对于新手来讲,我们需要先去npm 官网注册一个账号,注册需要输入用户名、密码、邮箱。注册完成后,官网会给我们指定的邮箱发送验证邮件,根据邮件的提示完成验证操作即可。
注册完成之后一定要先去邮箱进行验证,否则你的 npm 账号不能发布 npm 包(发布时会报错)。
制作 npm 包
当前我们的目的是学习 npm 包的发布操作,所以我们只需要制作一个最简单的 npm 包做演示即可。
- 新建文件夹
yuan-npm-test-demo - 进入
yuan-npm-test-demo文件夹,在当前文件路径的命令行下执行npm init,这个过程可以一路回车,这样包名和文件夹名是相同的(即yuan-npm-test-demo)。 - 在该文件夹下新建
index.js文件,并输入如下内容。
export.run = function() {
console.log("这是一个run方法")
}
将包上传或更新至 npm
- 要上传包首先需要登陆
npm,打开命令行执行:npm login,然后输入 npm 官网的账号、密码和邮箱。 - 登陆成功后执行:npm public 来发布上传自定义的包。
- 发布成功之后即可在 npm 官网上查到包是否存在。
- 当想要在已发布的包中添加一些东西,只需要在更改完代码之后,先修改版本号,然后在命令行执行
npm login和npm publish即可。
在新项目中使用已发布的包
- 创建一个新的文件夹,如 test;
- 在 test 文件夹中执行
npm init; - 使用 npm 下载发布的包:
npm i yuan-npm-test-demo; - 在 test 中新建 index.js 文件,使用
yuan-npm-test-demo;
const yuanNpm = require("yuan-npm-test-demo");
yuanNpm.run();
- 在命令行执行命令:
node index.js,即可看到输出。
npm publish报错解决方案
- npm 官网注册完成账号之后,是否进行了邮箱验证,如果没有,一定要先进行邮箱验证;
- 检查淘宝镜像是否是:
http://registry.npmjs.org/,如果不是,可以根据下面的命令行进行设置;
npm config set registry http://registry.npmjs.org/
- 检查包名是否被使用过,如果被使用过,则需要修改包名(即 package.json 中的 name),重新
npm publish; - 如果是更新已发布的包,则检查版本号(即 package.json 中的 version)是否更新,更新后重新
npm publish。