制作自己前端js的npm包简析

233 阅读1分钟

记录一下第一次制作npm包

npm包说明:

npm包其实就是我们写好的工具JS等文件上传到npm服务器,然后我们可以随时在npm服务器下载回来使用。

提前准备好npm的账号跟我们需要上传的工具包

步骤一:准备好npm账号

npm官网(www.npmjs.com/)

步骤二:制作npm工具包

在我们的工具工程里面,打开目录的cmd或者vscode的终端(后续命令不会再写在那里执行了,默认在这些地方执行),在该目录下执行命令npm init

执行命令后会有一系列的选项填写,可以全部默认。最后得到一个package.json

image.png

1、name就是我们的包名了,别人下载的时候就是通过这个包名下载。

注意,包名在npm服务器里面是需要唯一的,不唯一的话会报错,不能跟其他npm包重叠

2、main就是我们的入口文件了

image.png

在这里我们抛出一个run方法,用于测试。

步骤三:上传npm服务器

  1. 执行命令npm login登录npm服务器,依次输入自己的账号等。
  2. 然后在有 package.json的根目录下执行npm publish命令。如果报错了,估计是名字有冲突。 之后就能在npm官网上面查询到我们的npm包了

image.png

整个操作跟上传GitHub差不多。

步骤四:下载npm包

上传完后,我们需要在其他项目使用的话,通过npm install 自己的包名就可以把工具包下载到项目的node_modules目录

image.png

然后我们就可以通过import、require等方法引入我们的工具包

import gzwnpmdemo from 'gzwnpmdemo'
gzwnpmdemo.run()