发布npm包（vue组件）（empty组件为例）

_林溪_

已于 2023-04-13 14:41:23 修改

阅读量409

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js npm javascript

于 2023-04-13 14:00:54 首次发布

本文链接：https://blog.csdn.net/qq_29811101/article/details/130128044

1.创建项目

在文件夹中打开cmd输入以下命令，新建一个vue的项目，名称自定义

vue create 项目名（projectName）

在src的同级目录下新建一个名称为myComponents的组件库，如图所示
在这里插入图片描述

2.配置项目

myComponents是新增的一个目录，默认不被webpack处理，所以需要在vue.config.js里面配置组件库，以便webpack编译。没有vue.config.js的话，就在目录下新建一个。并在vue.config.js填入一下内容

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map'
},
// 扩展 webpack 配置，使 components 加入编译
chainWebpack: config => {
    config.module
        .rule('js')
        .include
        .add('/myComponents')//这里根据你文件夹名称自定义，每个人不一样
        .end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => {
            // 修改它的选项...
            return options
        })
}
})

3.编译自定义组件库

在myComponents文件加下新建一个yl-h5-empty文件夹(此文件夹即是你对组件的命名)，同时，在此文件夹下新建.vue文件，文件名最好与文件夹yl-h5-empty命名一致。
分别在myComponents文件夹和yl-h5-empty文件夹下新建index.js文件，这是它们的入口文件，注意路径，不要弄错了。

要将所有的静态资源文件等放入myComponents文件夹下，比如我就放在了assets下，因为外部的其他文件是不会被打包上传的。
在这里插入图片描述
yl-h5-empty/yl-h5-empty.vue 文件是组件文件，需根据自己情况编写组件代码。
以yl-h5-empty/yl-h5-empty.vue为例子，yl-h5-empty文件夹下index.js的代码如下：

import ylH5Empty from './yl-h5-empty'
ylH5Empty.install = function(Vue) {
  Vue.component('yl-h5-empty', ylH5Empty)
}
export default ylH5Empty

编写myComponents/index.js文件，对组件库进行导出：

import ylH5Empty from './yl-h5-empty/index'
const components = [
  ylH5Empty
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = Vue => {
  // 判断是否可以安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  ylH5Empty
}

4.在本地测试组件能否正常使用

如图在本地的src下的main.js导入组件并使用，并在App.vue里面直接使用自己的组件。
main.js里面引用
app.vue里引用
并使用npm run serve运行查看能否运行成功
在这里插入图片描述
组件引用成功，接下来就是发布自己的npm包了

5.本地继续配置

在package.json的sript命令中新增一条编译组件库的命令，参考vue-cli的配置文档：构建目标 | Vue CLI (vuejs.org)

"lib": "vue-cli-service build --target lib --name landscape-components --dest lib myComponents/index.js"

在这里插入图片描述
执行编译命令

npm run lib

编译成功之后会得到一个lib文件夹
在这里插入图片描述

5.1 配置`package.json`文件

在这里插入图片描述

  "name": "yl-h5-empty",//组件名称
  "version": "0.0.1",//版本号
  "private": false,//原来为true，要改成false，否则发布不出去
  "description": "项目H5中使用的Empty组件", //包的描述
  "main": "lib/landscape-components.umd.min.js", //入口文件
  "keywords": ["empty"],//关键词
  "author": { "name": "xxx" }, //作者

5.2 添加`.npmignore`文件

这一步比较重要，旨在发布npm包的时候忽略不必要的文件上传，需要编译上传的只有lib文件夹,package.json,README.md这三个，其他的都可以忽略。
在这里插入图片描述

# 忽略目录
src
myComponents
node_modules
public
utils
# 忽略指定文件
vue.config.js
babel.config.js
*.map
jsconfig.json

6.发布npm包

6.1 注册

需在npm官网（https://www.npmjs.com/）上注册一个账号，记住用户名、密码、邮箱

6.2 本地项目下登录

在进行登录操作之前，先查看一下自己使用的npm源。如果是淘宝源，需要更换为官方源，因为淘宝源是只读源。

npm get registry // 查看源

npm config set registry http://www.npmjs.org // 切换为官方源

或者

npm config set registry https://registry.npmjs.org // 切换为官方源

在项目文件夹下，输入npm login，依次输入用户名，密码，邮箱进行登录

6.3 发布包

登录成功之后，输入npm publish进行发布

npm publish

如果收到了npm发来的邮箱，便表示你发布成功啦
在这里插入图片描述
到此处，就可以在新项目中运行npm install yl-h5-empty进行下载使用该组件了。

7. 组件使用

新开项目vue create newProject，在项目下输入以下命令

npm install yl-h5-empty