如何将你的项目上传到 npm

简介: 如何将你的项目上传到 npm

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,就是最新了,省去了上传和下载的过程。


完结!快去发布属于你自己的 框架/库 吧!

目录
相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
333 3
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
3月前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
3月前
|
缓存 JavaScript 前端开发
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
该文章提供了八种解决Vue项目创建时遇到的`command failed: npm install --loglevel error`错误的方法,包括清理缓存、更换npm源、重新安装Node.js等措施。
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
|
6月前
npm构建vite项目
npm构建vite项目
|
6月前
使用npm构建vite+vue+ts项目的两种方式
使用npm构建vite+vue+ts项目的两种方式
143 0
使用npm构建vite+vue+ts项目的两种方式
|
5月前
npm-check【实用教程】升级项目中的依赖
npm-check【实用教程】升级项目中的依赖
95 0
|
5月前
|
JavaScript 开发工具
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
|
5月前
|
JavaScript
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
533 0
|
7月前
|
JavaScript Unix Shell
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
158 0