vue 封装组件库，发布至npm

该文章引用：https://blog.csdn.net/qq_31851435/article/details/106647833

封装vue组件库有2种形式：

1. 使用 webpack-simple 模板，没有vue-router的中间件，不需要路由时推荐使用，同时 webpack-simple没有格式的检测。
2. 使用 webpack 模板。

┌─testNpm                       项目主目录
├─ src 
│    └─ components              存放所有自定义组件目录
│           ├─ xx-btn           单个自定义组件目录
│           └─ index.js         组件库入口文件
├─ dist                         编译打包生成的文件目录
├─ package.json                 webpack配置文件
├─ webpack.config.js            webpack-simple的时候生成
└─ build                        webpack模式时生成的目录，webpack-simple没有
    ├─ webpack.base.conf.js
    └─ webpack.prod.conf.js

一、webpack-simple

1、新建一个 vue 项目

vue init webpack-simple
npm install

2、在src下新建一个目录（components）用来存放所有自定义组件源码

src/components/my-btn/my-btn.vue

3、components目录下新建一个index.js文件，为组件库的入口文件

src/components/index.js

// 导入封装的组件
import xxBtn from './xx-btn.vue'
 
const components = {
  // 通过install来安装组件
  install(Vue) {
    Vue.component(
      'xxBtn', xxBtn
    )
  }
}
 
// 注意这里的判断，很重要
if(typeof windwo !== 'undefined' && window.Vue) {
  window.Vue.use(comment)
}
 
// 导出组件库
export default components

4、修改package.json文件

 
{
  "name": "my-btn", // 发布的模块名称，发布线上后，可以通过npm install my-btn来引用该模块
  "description": "test npm", // 组件库描述
  "version": "0.0.0", // 版本号
  "author": "xxx", // 作者
  "license": "MIT", // 代码授权许可
  "private": false, // 公开项目，因为组件包是公用的，所以private要改为false
  
  "scripts": { // 运行命令
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  
  "main": "dist/my-btn.min.js", // 打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
  
  "keywords": [ // 关键词，可以通过npm搜索你填写的关键词找到你的模块
    "my-btn",
    "components"
  ],
  
  "files": [ // 指定打包后发布到npm的文件，没指定则不传，package.json是默认上传的
    "dist",
    "src/components"
  ],
 
  
  "homepage": "https://xx.github.io/xx/my-btn/dist/index.html", // 项目官网的url
  
  "bugs": { // 填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
    "url": "https://github.com/xx/my-btn/issues"
  },
  
  "repository": { // 指定代码所在的仓库地址
    "type": "git",
    "url": "https://github.com/xx/my-btn.git"
  },
}

5、修改webpack.config.js文件

/* 
* entry 入口文件
* ./src/main.js 为了测试组件是否有问题，这个时候可以直接运行项目npm run dev,进行测试。注意根目录下*的index.html js 引用地址需要改成 <script src="/dist/index.min.js"></script>
* ./src/components/index.js 打包上传的时候入口地址
*/
entry: process.env.NODE_ENV == 'development' ? './src/main.js' : './src/components/index.js',
output: { // 修改输出文件到 dist 下
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: "index.min.js", // 生成的文件名
  library: "my-btn", // 指定的就是你使用require时的模块名
  libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},

6、编译打包，生成的文件在dist目录下

npm run build

7、测试插件

npm pack

npm pack 之后，会在当前目录下生成一个 xx-btn-1.0.0.tgz 的文件。
打开一个vue项目，将压缩文件放到项目某个目录下，执行命令

npm install 路径\xx-btn-1.0.0.tgz

8、在vue 项目中安装好插件后，在项目的入口文件main.js里引入使用

import myBtn from 'my-btn'
Vue.use(myBtn)

之后就可以在项目的任意组件中引用就行了，如果引入成功，则说明打包成功，接下来就是发布到npm上了

9、发布npm

1、先到NPM官网注册账号，如果已有账号则跳过此步骤
2、在组件库项目的根目录下执行

1、登录-用户名、密码、emall
npm login

2、 发布到npm官网
npm publish

// 版本迭代一级，每次更新时都需要输入这个命令，或者直接在package.json中修改版本号，只要与npm上的版本不同就行
npm version patch 

// 撤销发布的包
npm unpublish
// 推荐使用（使用这个命令，并不会在社区里撤销你已有的包，但会在任何人尝试安装这个包的时候得到警告）
npm deprecate <pkg>[@<version>] <message>
npm deprecate xx-btn '这个包我已经不再维护了哟～'
// 删除某个版本
npm unpublish xx-btn@1.0.0 
// 删除整个npm市场的包
npm unpublish xx-btn --force 

二、webpack

该方案未测试，感兴趣的可以去头部引用的地址查看。