创建多组件npm组件库

很久很久以前，就想发一个的，但总是被娱乐的自己做牵制。
想着现在发~~~
还不错，忙里偷闲，赶紧记忆一波~

回到正题

由于是组件嘛，就不要那么麻烦 vue init webpack xxx还得删一堆东西，所以使用webpack-simple版本来构建一个项目就好了。

目录结构

以上呢，写了三个组件，aaa文件包含aaa.vue以及index.js

//aaa.vue
<template>
  <div>
    <span>这是aaa组件</span>
    <span>{{con}}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'aaa',
  props:{
    con:{
      type: String,
      default:'aaa'
    }
  },
};
</script>

//aaa.js
import aaa from './aaa.vue';
aaa.install = Vue => Vue.component(aaa.name, aaa);
export default aaa;

组件bbb和ccc雷同，就不一一介绍了。
当然以上组件导出的方法，也可以借鉴这篇文章当中的 require.context方式来导出。减少冗长而重复的代码。

在src目录下新建index.js，供webpack中的entry所用。当然你也可以直接修改main.js中的代码，但是不利于调试，这里就不建议你这么做了。

//index.js
import aaa from "./components/aaa"
import bbb from "./components/bbb"
import ccc from "./components/ccc"

// 1、添加组件
const components = [
  aaa,
  bbb,
  ccc
]

// 2、可以使用Vue.use进行全局安装了。需要第3步
const install = function (Vue, opt = {}){
  components.map( component => {
    Vue.component(component.name, component)
  })
}

// 3、支持使用标签方式引入   这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
if(typeof window !== 'undefined' && window.Vue) {
  install.use(window.Vue)
}


export default {
  install,  //总体
  ...components //按需
}

然后我们需要修改配置文件webpack.config.js

//webpack.config.js
{
  entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'yin.js',
    library: 'yin', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式  libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  }
}

最后一步了，修改 package.json中的配置

{
  "private": false,  //默认为true，修改为公有
  "main": "dist/yin.js",
  "files": [
    "dist/*",
    "src/*",
    "*.json",
    "*.js"
  ],
}

打包项目
num run build

这么一来，组件方面的需求就已经写完了。现在来说说怎么上传到npm。

在组件的根目录下的终端中，

// 登录npm
npm login

// 发布组件
npm publish

当然这一步是有可能失败的，除非你定义的组件名，在npm中不重复。

更新组件

// 修改版本号
npm version

// 发布组件
npm publish

删除npm包

// 强制删除，这个是撤销24小时发布的包
npm unpublish --force 

// 删除已发布好的包
npx force-unpublish xxxxxx