一、简介
- Vue 自定义全局UI组件
- Vue 全局导入 JS 文件
- npm 删除(废弃)发布包或版本
- 前端开发经常需要使用到 npm 安装第三方库，那么如何将自己写的库上传到 npm 进行使用呢？
- 如果在项目中使用到依赖包，可以先了解一下 npm 命令使用介绍以及区别，里面有对安装依赖包的详细介绍
二、注册 NPM 账号
- 注册好之后记得去填的注册邮箱里面验证一下，在继续下一步，否则发布会报错。
三、打开命令行，登录 NPM
- 在登录之前，先确定一下
NPM镜像，如果镜像在之前设置为了淘宝镜像，那么在使用npm login登录时会出错，所以需要先将源替换为官方源，然后再上传。
// 查看当前 npm 源配置 $ npm config ls // 查看当前 npm 全部源配置 $ npm config ls -l // 修改 npm 源地址为官方源 $ npm config set registry https://registry.npmjs.org/ // 将 npm 源地址修改为淘宝源（用于安装 npm 速度慢的时候使用） $ npm config set registry https://registry.npm.taobao.org/
- 通过执行
$ npm config ls -l命令查看metrics-registry = "https://registry.npmjs.org/"是否为官方源，如果不是则使用上面命令设置为官方源。 - 进行登录
// 登录命令 $ npm login // 退出登录命令 $ npm logout
- 运行登录命令之后输入
NPM 账号、密码、邮件
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm login Username: dengzemiao Password: Email: (this IS public) xxxxx@163.com Logged in as dengzemiao on https://registry.npmjs.org/.
- 登录之后出现最下面这行
Logged in as dengzemiao on https://registry.npmjs.org/.就说明登录成功了。
四、上传发包
- 创建一个文件夹，例如：DZMTest
$ cd DZMTest
- 在文件中创建 package.json，运行命令之后一路回车到底，没啥好改的，等下到文件里面也可以改。
$ npm init
package.json文件全部字段解释：
一般创建出来的package.json文件只会包含下面其中一部分字段，其他都是隐藏可选字段，根据自己的情况使用，下面列出来大部分常用的字段用于参考：
{ // 发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线! "name": "#####", // 版本号，每次要更新 "version": "1.0.0", // 包的描述 "description": "仅供测试，别下载", // 文件入口，默认是 index.js，可修改 "main": "index.js", "scripts": { // 测试命令，可以不填直接回车 "test": "echo \"Error: no test specified\" && exit 1" }, // 作者名称 "author": "###", // 包遵循的开源协议，默认是ISC "license": "ISC", // 因为组件包是公用的，所以 private 为 false "private": false, // 当前包需要依赖的第三方组件，如何安装使用依赖包，可以看看文章顶部的NPM命令介绍文章 "dependencies": {}, // "devDependencies": {} // 指定代码所在的仓库地址 "repository": { "type": "git", "url": "https://github.com/dengzemiao/DZMFullPage.git" }, // bug在哪里提 "bugs": { "url": "https://github.com/dengzemiao/DZMFullPage/issues" }, // 项目官网的地址 "homepage": "https://github.com/dengzemiao/DZMFullPage", // 指定打包后,包中存在的文件夹 "files": [ "dist", "src" ], // 指定了项目的目标浏览器的范围 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], // 项目关键词，供搜索 "keywords": [ "测试" ] }
- 调整
package.json，文件中这两个是必须要填写的，第一个是包名，第二个是版本号，其他随意，更具自己需求调整，没什么特别需求就修改名字跟版本号直接上，其他默认是啥就是啥，看自己需求去改或者增删。
{ "name": "dzmtest", "version": "1.0.0" }
- 去
NPM官网查询一下当前包名是否存在，存在的话就需要换一个：
- 在
DZMTest文件夹里面在创建一个index.js文件，这也是上面设置的入口文件index.js:
// index.js 页面方法 function indexTest () { console.log('index.js 测试输出') } // 导出 （module.exports 如果使用不是很熟，百度一下就知道了，用法很简单） module.exports = { indexTest }
- (如果不需要本地测试一下可以跳过) 创建好
index.js之后可以本地测试一下，创建一个test.js在这个文件里面导入index.js进行本地使用一下test.js:
// 导入 index.js 中的方法进行本地测试 var index = require('./index') // 执行方法 index.indexTest()
- 我这边用的是
VSCode装了运行js的插件可以直接右键运行代码，输出为
[Running] node "/Users/dengzemiao/Desktop/NPM/DZMTest/test.js" index.js 测试输出 [Done] exited with code=0 in 0.054 seconds
- 这样，说明代码是没有问题的，那么可以进行发布了！！
- (可选) 可以在根目录下新建
.npmignore文件，设置忽略发布文件，文件不多可以不加，看自己心情。
.DS_Store node_modules/ examples/ packages/ public/ vue.config.js babel.config.js *.map *.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
- 发布代码
# 普通包 $ npm publish # 私域包 # 包名：@username/packageName # username 必须为当前登录的用户名，必须一致，否则会报错，然后加上参数 --access public $ npm publish --access public
