组件库发布到npm全流程

1、初衷

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

2、项目搭建

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
        })
  }
}
复制代码

3、编写组件

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就不具体展现了

4、使用组件

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>
复制代码

5、发布到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)
复制代码

6、项目地址

github地址：github.com/minxiang515…

7、❤️感谢阅读

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