大家好，我是前端追寻路上的【酱酱仔】

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

前提：本文涉及的命令都是在要发布的包的根目录下执行的，在编辑器的集成终端或者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

 

按照以上操作即可，这里基础的我这里不过多解释说明了哈

Vue创建脚手架的步骤（简单详细）-CSDN博客

 如果发现安装脚手架太慢，可切换成淘宝镜像

                命令说明                        命令操作
查看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的打包）

/*
 * @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 方法，供组件对外按需引入

代码如下：

// 导入你的组件、指令和过滤器
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文件：

import MyComponents from '../plugins/index.js'
app.use(MyComponents); // 在 app 上使用 MyComponents 插件

本地页面直接使用组件的name名称即可

f.本地页面使用没有问题，这时候就可以npm打包发布了

库模式打包，配置package.json文件

    "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中配置打包信息：

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文件中添加：

.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引入

import lgbComponentsBox from 'lgb-components-box'
import 'lgb-components-box/lib/lgb-components-box.css'

Vue.use(lgbComponentsBox);
注：全局使用,组件可以单独引用

页面直接使用npm包里面的 组件name即可

<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>

这样你的npm包就发布上去啦，供多个项目使用噜，是不是感觉前端很有意思哈！！

# npm # 前端 # node.js
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊