Vue cli3 lib模式封装alioss图片上传组件并发布到 npm

以前工做中组件都是封装在项目里，最近总想鼓捣一个组件发布到npm上并供大伙使用，因此参考了一些文章弄了一下，固然使用的是最新的vuecli3工具其中的vue-cli-service build --target lib 文末我会经过源码讲解下lib 定制化的输出umd模式的.min.js 不须要输出多余的文件

个人项目地址

• github.com/HeJinG90/al… 欢迎star，是一个图片上传的组件，图片传到alioss上
• 对象存储oss 官网 help.aliyun.com/document_de… 能够了解一波

1、技术栈

vuecli3

1、建立项目

经过vuecli3建立一个初始化项目，具体能够查看官网。cli.vuejs.org/zh/guide/cr…

2、调整项目结构

咱们须要一个文件夹存放组件，一个文件夹存放示例，按照如下方式对目录进行改造。

• examples // 原 src 目录，改为 examples 用做示例展现
• packages // 新增 packages 用于编写存放组件，以下图为个人项目结构

3、配置项目以支持新的目录结构

src目录改名为examples，致使项目没法运行

• 注：vue.config.js 是一个可选的配置文件，若是项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

• 从新配置入口，修改配置中的 pages 选项

• 新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。

• 这里使用 pages 修改入口到 examples,设置css不单独提取。

module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  css: { extract: false }
}
复制代码

4、编写组件

以上咱们已配置好对新目录架构的支持，接下来咱们尝试编写组件。如下咱们以一个已发布到 npm 的小插件做为示例。具体代码能够看我项目源码，我大概说下思路：

• 在 packages 目录下，全部的单个组件都以文件夹的形式存储，因此这里建立一个文件夹 uploadpictures
• 在 uploadpictures 文件夹下建立 src 文件夹存储组件源码
• 在 /uploadpictures 文件夹下建立 index.js 文件对外提供对组件的引用。
• 修改 /packages/uploadpictures/index.js文件，对外提供引用。
• 建立组件的统一入口文件/packages/index.js，导出组件，其实跟elementui差很少 还能够改形成按需引入。
• tip: 固然个人组件里面有引用到elementui框架中的message和loading组件，在此感谢饿了吗团队组件框架解耦的比较好，我便抽取出来拿来用了。建立了loading message utils 三个文件夹。
• 而后就是引用

import Vue from 'vue'
import Loading from '../../loading/index'
Vue.use(Loading)
import Message from '../../message/index'
Vue.prototype.$message = Message;
import '../../loading/src/loading.css';
import '../../message/src/message.css';
复制代码

5、编写示例代码

在examples文件夹里编写

<template>
  <div id="app">
    <uploadPictures @change = "getimg" :imgs = imgs :ossconfig = ossconfig :quality = 1 :dir = dir :size = 200 :num = 3 ></uploadPictures>
  </div>
</template>

<script>
import Vue from 'vue'
// 导入组件
import uploadPictures from '../packages/index'
// 使用组件
Vue.use(uploadPictures)
export default {
  name: 'app',
  data(){
       return{
           imgs:[], // 图片数组
           ossconfig:{
                accessKeyId: '',
                accessKeySecret: '',
                bucket: '',
                region: 'oss-cn-beijing'
            },
            dir:'/images/' //目录文件夹
       }
       
   },
   methods:{
     getimg(e){
           this.imgs = e;
       },
   }
}
</script>

复制代码

6、发布到 npm，方便直接在项目中引用

• 到此为止咱们一个完整的组件已经开发完成了，接下来就是发布到 npm 以供后期使用。

• 在package.json 中新增一条编译为库的命令

• tip:在库模式中，Vue是外置的，这意味着即便在代码中引入了 Vue，打包后的文件也是不包含Vue的。

• Vue Cli3 构建目标：库

• 官方文档：cli.vuejs.org/zh/guide/bu…

• 如下咱们在 scripts 中新增一条命令 npm run lib

--target: 构建目标，默认为app。这里修改成 lib 启用库模式。 --dest : 输出目录，默认 dist。这里咱们改为 lib

• 最后一个参数为入口文件，默认为 src/App.vue。这里咱们指定编译 packages/ 组件库目录。

"scripts": {
    "lib": "vue-cli-service build --target lib --name alioss-uploadpictures --dest lib ./packages/index.js"
}
复制代码

执行编译库命令

$ yarn lib
复制代码

• 打包出来的文件

  

• 正常来讲到这已经能够了，可是package.json里面main字段只须要其中到umd.min.js因此我要去源码对- 其生成的多余文件进行改造，重点来了哈。咱们来到node_modules 文件夹 找到@vue/cli-service 依赖包。

  

• 咱们先去index.js中把formats改下，

  

• 接着咱们去resolveLibConfig.js中修改下面的代码，固然通读人家源码不可能，有需求就去看下源码，改一下就好。

  

• 最后的结果固然是只生成两个文件，由于默认是启用了sourcemap,因此会生成一个对应的.map文件

  

配置 package.json 文件中发布到 npm 的字段 里面有几个重要的我提一下

• name: 包名，该名字是惟一的。可在 npm 官网搜索名字，若是存在则需换个名字。
• version: 版本号，每次发布至 npm 须要修改版本号，不能和历史版本号相同。
• main: 入口文件，该字段需指向咱们最终编译后的包文件。
• private：是否私有，须要修改成 false 才能发布到 npm
• license： 开源协议
• 固然能够参考个人package.json文件，我重点说一下peerDependencies这个属性，这个属性的意思是当前的组件要依赖于哪一个包 ，好比我这个组件确定要依赖vue包，写上版本就行了。还有需不须要在dependencies里面写依赖看本身的状况，若是你写的依赖版本高于宿主环境，可能会形成错误，因此我这不须要写，由于alioss依赖不提供按需引用，因此所有打包到生成到文件里了。
• 再说个重点，根据vuecli官网的指示: 构建库或是 Web Component 时的 Polyfills 当使用 Vue CLI 来构建一个库或是 Web Component 时，推荐给 @vue/babel-preset-env 传入 useBuiltIns: false 选项。这可以确保你的库或是组件不包含没必要要的 polyfills。一般来讲，打包 polyfills 应当是最终使用你的库的应用的责任。因此咱们设置 babel.config.js，这样会减小生成文件的体积。

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      "useBuiltIns": false
    }]
  ]
}
复制代码

添加 .npmignore 文件，设置忽略发布文件

• 咱们发布到 npm 中，只有编译后的 lib文件夹、examples文件夹、package.json、README.md才是须要被发布的。因此咱们须要设置忽略目录和文件。

# 忽略目录
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
复制代码

登陆到 npm

首先须要到 npm 官网上注册一个帐号，这个不是这篇文章重点，本身百度下就好。

$ npm login
复制代码

发布到 npm

执行发布命令，发布组件到 npm

$ npm publish
复制代码

发布成功

发布成功后稍等几分钟，便可在 npm 官网搜索到。如下是刚提交的 alioss-uploadpictures

使用新发布的组件库

安装

yarn add alioss-uploadpictures
复制代码

使用

import Vue from 'vue'
import uploadPictures from 'alioss-uploadpictures'
Vue.use(uploadPictures)
复制代码

例子

具体参数以及使用能够点击下面的github地址

7、项目地址

Github 地址：github.com/HeJinG90/al…

npm 地址：www.npmjs.com/package/ali…