把自己的项目打包上传到npm

野性酷女 2023-02-22 08:10 35阅读 0赞

## 第一步：注册一个账号 ##

去npm的官方网站注册一个账号点击[打开链接][Link 1]

## 第二步：初始化 ##

使用npm init初始化一个package.json文件  
**注意**：必须要有这个文件才能上传，npm可以上传任何一个包含package.json的包，  
main：(入口)设置为lib/minigui-ui.common.js（名字自取）然后在本目录下建一个minigui-ui.common.js文件  
name：表示你这个包的名字只能小写  
version：代表版本，每次更新都要修改这里的版本再npm publish  
files：包含那些地文件夹和文件

"name": "minigui-ui",
     "version": "3.0.0",
     "description": "A Component Library for Vue.js.",
     "main": "lib/minigui-ui.common.js",
     "files": [
       "lib",
       "src",
       "packages",
       "types"
     ]

package.json可以在这里了解一下[点击查看][Link 2]

## 第三步：在本地使用命令行连接npm 使用下面的命令，然后按照提示走，密码默认是不会显示出来的 ##

npm login 
    //或者
    npm adduser

## 第四步：因为大部分的人npm使用的是淘宝镜像，上传会失败，所以需要替换为原来的镜像 https://registry.npmjs.org/ ##

npm config set registry https://registry.npmjs.org/

再查看是否设置成功

npm config get registry

扩展一下：

// 查看当前配置
    npm config list 
    
    // 安装镜像
    npm config set registry https://registry.npm.taobao.org/ 
    npm config set disturl https://npm.taobao.org/dist
    
    // 删除镜像
    npm config delete registry 
    npm config delete disturl

## 第五步：更改了镜像需要按照前面说过的步骤，重新在本地登陆你的npm账户 ##

## 第六步：上传到NPM ##

npm publish

## 第七步：如果上传过程中发现，npm ERR! registry error parsing json 报错 ##

## 第八步：解决报错方法，删除registry，继续安装模块就可以了 ##

npm config delete registry

## 第九步：撤销上传 ##

npm unpublish --force

## 第十步：更新上传后的npm包 ##

*  第一种是你可以手动去package.json里面修改版本号，修改后的版本号必须比之前的大，然后使用npm publish上传
 *  第二种是使用npm 命令行工具更新版本号，再使用npm publish 上传，
 *  版本号由三位组成 a.b.c，切换到package.json所在目录
 *  更新c处：npm version patch
 *  更新b处: npm version minor
 *  跟新a处: npm version major

每使用一次上面的命令，就在版本号对应的地方加一

## 注意事项: ##

你必须使用exports暴露你的方法，如下定义了一个npmTest的方法然后暴露出来，才能在安装这个包之后使用require引入

exports.npmTest = (name) => { 
        console.log(name)
    }

[Link 1]: https://www.npmjs.com/
[Link 2]: https://docs.npmjs.com/creating-a-package-json-file