1、上传前的准备
编程爱好者如果想让自己的项目像 Vue、React 框架那样能为众人所用,可以尝试将项目上传到 npm.org。
这里默认你已经安装了 node,如果没有的话需要自行安装。上传之前首先你要有一个(最好测试通过的)项目,项目中需要一个 package.json 文件(如果没有的话,`npm init` 初始化一个),里面涉及一些上传项目的配置,详情可以查看 此链接。这里简单说一下该文件内的几个必要的配置:
{ "name": "projectname", //包名只能小写 "version": "0.0.1", //当前发布的版本号,项目每次改动后需要修改版本后再发布 "description": "desc", "main": "index.js", //主入口,项目中需要有这个文件,文件名可以是别的,但是必须在这里指定 ...other config }
项目这边准备完毕之后需要到 npm 官网 注册一个账号,记住你的 username 和 email,注册完毕之后会给你的邮箱发送一封验证邮件,需要点击一下。完毕之后登录一下,就可以进行下面的上传工作了。
2、具体的上传步骤
上述工作准备就绪后,项目当前路径的命令行内执行如下命令:
npm adduser //1. 根据提示输入你的 username、password、email npm publish //2. 发布你的项目到 npm.org //注意:在执行 npm publish 时,如有报错且错误提示里面含有 https://registry.npm.taobao.org // 则说明你的 npm 源目前为淘宝源,需要更换为 npm 官方源,具体如下: npm config list //可查看你当前的 npm 配置 npm config set registry https://registry.npmjs.org/ //npm 源更换为 npm 官方源 npm publish //再发布 npm config set registry=http://registry.npm.taobao.org/ //配置完之后可以切回淘宝源
3、测试自己发布的包
找一个空目录,或者临时的项目,在命令行运行如下命令,如果看到提示 `+ yourname@0.0.1` 字样就表示你安装成功了。
npm install projectname //你上传的项目名
安装成功后实际使用一下你安装的包,因为你的包可能被不同用户以多种方式进行使用,下面我写一个测试的例子,假如我项目是用 Vue 开发的,这里模拟使用 vue-cli 的用户想要使用我发布的包。(推荐把 webpack、parcel 等尽可能的测一遍,以保证你项目能被用户正常使用)。
这里模拟 vue-cli 用户想要使用我发布的包,大致会进行如下流程的操作:
npm install -g vue-cli //vue-cli 官网指定的安装方式 vue create hello-world //创建一个新的项目 hello-world cd hello-world //进入到项目目录 npm run serve //打开运行后的链接 npm install projectname //用户安装你的 npm 包 //在项目中进行使用 App.vue <template> <div id="app"> <com1></com1> </div> </template>
运行到这里有 import 报错,这是因为 node 目前不支持 import,而我开发的包的入口文件使用了 import 关键字,这就推荐我们最好在发布前用 babel 转义一下 package.json 的入口文件 index.js 的 import 语法再给用户使用。
npx parcel build index.js --no-minify //不加 --no-minify 的话 HTML 压缩把 slot 标签删掉 //将 package.json 的 main 改为 dist/index.js !
4、开发人员如何加速调试
在你项目开发完成之前,想要测试一下你写的代码,普通方式就是像上面这样:在修改代码之后,更新 package.json 里的version,然后 npm publish,别人通过 npm install xxx 来更新。这种方式不免有些麻烦,开发人员可以通过本地调试。
可以在项目目录使用 npm link,然后在使用之处运行 npm link xxx,就是最新了,省去了上传和下载的过程。
完结!快去发布属于你自己的 框架/库 吧!