大家好,我是前端追寻路上的【酱酱仔】
作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。
前提:本文涉及的命令都是在要发布的包的根目录下执行的,在编辑器的集成终端或者cmd终端执行效果都是一样的【cmd运行要以管理员模式运行哈】。
以下是我npm发布自己的包过程中所遇到的问题汇总如下:
问题一:如何上传自己的包到npm
问题二:npm login和npm publish过程中经常报错
问题三:npm包更新过程后,不同镜像下npm xx包版本不同 (大坑)
针对以上问题作出以下操作解释说明哈:
问题一:如何上传自己的包到npm
1.1、首先需要去npm官网注册个人npm账号(这里注意邮箱号一定要是可用的)
1.2、其次需要创建npm包 (如果是发布组件可以创建vue-cli包,如果是发布js库之类的可以直接npm init包)
1.3、然后配置npm内配置文件等等
1.4、最终经过测试没问题后可以发布到npm官网
这里我拿封装npm组件为例,演示下操作流程
1.1、npm | Home (npmjs.com) 官网注册账号,有账号的话可以直接登录
1.2、我这里创建vue-cli脚手架,在里面创建npm配置文件(注意也要使用管理员命令运行)
主要是基于使用cli3初始化一个项目工程:
全局安装vue-cli:
npm install -g @vue/cli
创建一个vue项目:
vue create llgtfoo-components-boxs
按照以上操作即可,这里基础的我这里不过多解释说明了哈
如果发现安装脚手架太慢,可切换成淘宝镜像
|-----------|--------------------------------------------------------|
| 命令说明 | 命令操作 |
| 查看npm当前镜像 | npm config get registry |
| 切换最新淘宝镜像 | npm config set registry https://registry.npmmirror.com |
| 切换境外镜像 | npm config set registry https://registry.npmjs.org/ |
1.3、npm内配置文件信息
a.在项目中添加组件库文件夹:
在根目录下新建一个plugins文件夹,用来放组件,项目文件结构为:
b.添加配置文件
项目根目录下面添加vue.config.js文件,写入以下内容:
(主要是配置webpack的打包)
javascript
/*
* @Author: your name
* @Date: 2024-07-22 20:11:02
* @LastEditTime: 2024-07-22 20:20:19
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \health\vue.config.js
*/
const path = require('path')
module.exports = {
// 修改 pages 入口
pages: {
index: {
entry: 'src/main.js', // 入口
template: 'public/index.html', // 模板
filename: 'index.html' // 输出文件
}
},
// 扩展 webpack 配置
chainWebpack: config => {
// @ 默认指向 src 目录
// 新增一个 ~ 指向 plugins
config.resolve.alias
.set('~', path.resolve('plugins'))
// 把 plugins 加入编译,因为新增的文件默认是不被 webpack 处理的
config.module
.rule('js')
.include.add(/plugins/).end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}
c.在新建的一个plugins文件夹下面编写npm包内组件
我这是把封装的组件在不同的文件夹,一个文件夹代表一个组件,后面在合理添加并继续封装。
***下面我以custom-tree这个组件为例:(是一个美观自定义树形显示组件)
d.****index.js文件内容:
为组件提供 install 方法,供组件对外按需引入
代码如下:
javascript
// 导入你的组件、指令和过滤器
import customTree from './components/custom-tree';
import screenHeight from '../utils/screenHeight';
// 定义一个对象,包含插件的 install 方法和需要暴露的组件、指令、过滤器等
const lgbComponents = {
install(Vue) {
// 注册指令
Vue.directive('screen-height', screenHeight);
// 注册组件
Vue.component('custom-tree', customTree);
}
};
// 导出插件对象
export default lgbComponents;
注:这个单独暴露组件的index.js,意思是如果这个工程值封装一个组件使用的话,就用这个index.js文件暴露install即可了。
e.在本地页面中使用组件:
在main.js中全局引入统一注册的plugins文件夹下面的index.js文件:
javascript
import MyComponents from '../plugins/index.js'
app.use(MyComponents); // 在 app 上使用 MyComponents 插件
本地页面直接使用组件的name名称即可
f.本地页面使用没有问题,这时候就可以npm打包发布了
库模式打包,配置package.json文件
javascript
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name lgb-components-box --dest lib plugins/index.js",
"lint": "vue-cli-service lint"
},
因为在vue-cli中,可以通过以下命令将一个单独的入口打包成库
// target: 默认为构建应用,改为 lib 即可启用构建库模式
// name: 输出文件名
// dest: 输出目录,默认为 dist,这里我们改为 lib
// entry: 入口文件路径
vue-cli-service build --target lib --name lib [entry]
package.json中配置打包信息:
javascript
name:包名
version:包的版本号,每次发包这个版本号都要改
description:包的描述
private:是否私有,一般都是false
author:作者
license:npm包协议
keywords:关键字,供npm上模糊搜索到包
main: "lib/lgb-components-box.umd.min.js",打包后的入口文件
module: "lib/lgb-components-box.common.js",打包后的入口文件
g..gitignore文件中添加:
javascript
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
src/
plugins/
public/
vue.config.js
babel.config.js
*.map
*.html
h.把包的一些测试文件过滤掉,最终打包只留下直接封装的文件,即plugins中封装的暴露组件
在终端执行npm run lib 即可,执行结果:
i.发布包(注意一定要使用境外镜像,不然打包不了)
终端中执行发包命令
npm login 登录(如果没有npm账号需要自己注册,并认证邮箱)
这样既登录成功
需要 one-time 的话,在手机你的邮箱里面显示 npm的验证码
在输入npm publish 发布包,出现包名加版本号,即发布成功
这个过程境外镜像比较慢 经常包network错误,可换成自己手机热点连接电脑试试,多尝试几次
npm 上能找到自己发布的包:
j.使用发布的包
安装命令 npm install lgb-components-box
使用文档 见使用文档说明
项目里面使用如下main.js引入
javascript
import lgbComponentsBox from 'lgb-components-box'
import 'lgb-components-box/lib/lgb-components-box.css'
Vue.use(lgbComponentsBox);
注:全局使用,组件可以单独引用
页面直接使用npm包里面的 组件name即可
javascript
<custom-tree subtractHeightJt="140px" leftTitle="测试npm打包组件"></custom-tree>
问题二:npm login和npm publish过程中经常报错
a.大部分原因因为使用境外镜像访问比较慢导致的。
b.一部分原因因为邮箱号的npm验证码错误导致。
c.一小部分原因你的包名在npm上面有重复的导致。
其他原因:
1、npm 源不对,处理:npm config set registry https://registry.npmjs.org/ -- 有些非官方源个人可能无权发布,比如淘宝镜像需要admin权限。
2、文件夹名和package.json里的'name'属性一样时也无法发布,处理:将文件夹名或'name'改成不一致即可。
3、如果你的 npm 账号未登录成功,也会发包失败。
npm login 没有出现 username,跳转cnpm注册的解决方法_npm username忘记了-CSDN博客
问题三:npm包更新过程后,不同镜像下npm xx包版本不同
这种原因是因为 使用的淘宝镜像会延迟与国外镜像,所以在淘宝镜像下会是老版本,只有在境外镜像会同步管理端平台发布版本。
因此刚发布更新的npm包文件也需要同样使用境外镜像npm install
常用的npm包命令
|----------------|---------------------------------------------------------------------------|
| npm说明 | npm命令 |
| npm登录 | npm login |
| npm发布 | npm publish |
| npm初始化包 | npm init |
| 查看当前npm包版本 | npm view <package_name> versions |
| 查看npm源 | npm config get registry |
| 设置npm源 | npm config set registry <registry_url> |
| npm更新版本号 | npm version <update_type> <update_type>
可以是patch
、minor
、major
等标签。 |
| npm取消发布 | npm unpublish <package_name>@<version> |