组件库发布到npm全流程

一、初衷

在上个月面试的过程中，好几家公司都问到是否有开源项目，在通往高级资深的路上，似乎已经成了不可缺少的一项；这篇文章会详细介绍整个全流程；大佬们操作起来吧~

二、项目搭建

1.创建项目

vue init mxdm-ui

2.调整目录

...
|-- test      // 原src目录，改成test用作展示
|-- packages      // 新增 packages 用于编写存放组件
...

3.调整配置 新增vue.config.js

module.exports = {
    pages:{
        index:{
            entry:"test/main.js",
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
        }
    },
      // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

三、编写组件

1.创建一个最基本的button组件

...
|-- packages
--------button
--------------src
-------------------button.vue
--------------index.js
--------index.js

packages文件下的index.js为所有组件的出口

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

button下的index.js为button组件出口

import ElButton from './src/button.vue';
ElButton.install = function(Vue){
    Vue.component(ElButton.name, ElButton);
}

export default ElButton;

在这里button/src/button.vue就不具体展示了

四、使用组件

1.main.js导入组件库

// 导入组件库
import mxdmUI from '../packages'
Vue.use(mxdmUI)

2.使用

<mx-button size="small">默认按钮</mx-button>
<mx-button type="primary" >主要按钮</mx-button>
<mx-button type="warning" size="small">主要按钮</mx-button>

五、发布到npm

1.package.json 新增打包成库的命令

• --target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
• --dest : 输出目录，默认 dist。这里我们改成 lib
• [entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。

"scripts":{
     "lib": "vue-cli-service build --target lib --name mxdm-ui  packages/index.js"
}

2.执行命令

npm run lib

生成dist文件

3.packjson文件配置说明

{
  "name": "mxdm-ui", //包名
  "version": "0.1.5",//版本号
  "description": "mxdm-ui组件库",//描述
  "main": "dist/mxdm-ui.umd.min.js",// 入口文件,打包后的压缩文件
  "keyword":"mxdm-ui",//关键词
  "private": false, //是否私有 必须为false
 }

4.登录npm

保证镜像切回npm

npm config set registry http://registry.npmjs.org 

执行npm login命令，系统会提示输入账户和密码。如果没有npm账户，请注册。

npm login

登录成功后，就可以再次执行 npm publish 进行发布

5.发布到 npm

发布之前可以配置.npmignore 文件

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

执行发布命令

npm publish

6.发布成功

7.安装验证

npm install mxdm-ui

在 main.js 引入并注册

import mxdm-ui from 'mxdm-ui' 
vue.use(mxdm-ui)

六、项目地址

github地址：github.com/minxiang515…

七、❤️感谢阅读

1. 如果本文对你有帮助，不要吝啬你的赞哟，你的「赞」是我前行的动力。
2. 欢迎关注公众号 【前端冥想】，也可扫码加我微信备注 【加群】 拉你进交流分享群，一起学习进步。