如何将封装的前端组件发布到NPM

开发背景

npm是Node Package Manager的缩写，是随同Node.js一同安装的软件包管理工具。它允许开发者通过命令行界面安装、分享、管理和发布Node.js模块和软件包。

在项目开发中，作为开发者往往会根据使用习惯或工作场景，封装一些有助于日常开发的组件，但是每次不同项目之间使用时，就需要之间复制粘贴，更麻烦的是，当你在某个项目中升级或者优化了相关组件，也无法及时的更新到相关项目，维护成本随之增加，这时候，将自己封装的自定义组件发布至npm管理，就相对简化许多

准备工作

一、注册属于自己的NPM账号（已有账号可跳过）

        点击链接前往NPM官网:npm | Home

二、环境配置

此环境配置可提前切换至以下版本，也可在发布到NPM时切换

npm => 9.3.1
node => 20.9.0

如果npm版本不好更换或想使用多个npm版本，可以使用nvm来进行管理，这样就可以自由的在多版本之间来回切换了，具体的操作可参考:nvm的安装配置及报错处理办法

开发过程

一、构建基础项目

1、创建一个新项目

npm create npm-package

npm-package 项目名

2、根据需要安装依赖

npm install

如果你的自定义组件需要引入相关组件库或其他依赖，正常安装依赖即可

例如：我需要引入element-plus，我只需要安装依赖即可，不需要全局引用，只在使用时引用

 npm install element-plus

3、删除无用文件

1）删除 src/assets 文件夹

2）删除 src/components 文件夹

3）清空 App.vue 文件内容

二、封装组件

1、创建组件文件\src\packages\ym-search-select\Index.vue，文件目录如下：

2、写入封装的组件代码

如果组件中有相关css文件，请保证放置在组件包内（如：ym-search-select）

3、引入到App.vue中验证下，看是否可以正常使用，如下：

三、导出组件并打包

1、导出组件，创建 src/packages/index.js 文件，内容如下：

2、在 package.json 文件下配置打包命令，内容如下：

"package": "vue-cli-service build --target lib ./src/packages/index.js --name luochenya-common --dest luochenya-common"

打包命令解释：
1、--target lib 指定打包的目录
2、--name 打包后的文件的名称
3、--dest 打包后的文件夹的名称 

3、执行打包命令 npm run package ，打包后会多出一个 ym-element-common 文件夹，结构如下：

四、发布到NPM

1、初始化打包后的项目

切换到 ym-element-common 文件夹下，执行命令 npm init -y，会多出一个 package.json 文件，可以配置发布的包名、版本号、版本描述，内容如下：

2、设置npm源

首先查看npm源是否为官方源，

npm config get registry

如果有设置了淘宝镜像的需要切换到官方源，切换命令如下：

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

3、添加npm用户

在ym-element-common 文件夹下，执行命令 npm adduser，根据提示输入账号、密码，输出密码时不会显示输入状态，这一步一定要细心。

如果之前设置过用户，可跳过此步

4、发布npm包

在ym-element-common 文件夹下，执行命令 npm publish，如果发布失败可能是名字重复，改一下名字即可，发布成功后，我们可以到NPM个人中心，查看发布的NPM包

安装及引入方法

一、从NPM安装

npm install npm-package（包名）

二、全局引入

在main.js中引入注册,内容如下：

小结

下面是发布过程中常用的npm命令

npm config get registry // 查看当前npm源
npm login // 登录npm
npm publish // 发布npm包
npm publish --access=public // 发布公共的npm包
npm version patch // 更新当前包版本 v0.0.1 -> v0.0.2