vue-cli 3.x 开发插件并发布到 npm

为了摆脱咸鱼的身份，我给本身定了一个开源项目的目标

因而抽空写了一个 textarea，打算发布到 npm 的时候却遇到了问题

以前用 vue-cli 2.x 的时候，打包配置项很是透明，能够很容易的修改

但升级到 vue-cli 3.x 以后，反而一脸懵逼。。。

在踩了一天的坑以后，终于成功发布了一个小插件，因而记个笔记

 

1、调整项目结构

首先用 vue-cli 建立一个 default 项目

// 顺便安利一篇文章《Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目》

当前的项目目录是这样的：

 

首先须要建立一个 packages 目录，用来存放组件

而后将 src 目录改成 examples 用做示例

 

2、修改配置

启动项目的时候，默认入口文件是 src/main.js

将 src 目录改成 examples 以后，就须要从新配置入口文件

在根目录下建立一个 vue.config.js 文件

// vue.config.js
 module.exports = { // 将 examples 目录添加为新的页面
 pages: { index: { // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html', // 输出文件名
      filename: 'index.html' } } }

完成这一步以后就能够正常启动项目了

vue-cli 3.x  提供了构建库的命令，因此这里不须要再为 packages 目录配置 webpack

 

3、开发组件

以前已经建立了一个 packages 目录，用来存放组件

该目录下存放每一个组件单独的开发目录，和一个 index.js 整合全部组件，并对外导出

每一个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用

这里以 textarea 组件为例，完整的 packages 目录结构以下：

textarea/src/main.vue 是组件的开发文件，具体代码这里就不展现了

须要注意的是，组件必须声明 name，这个 name 就是组件的标签

textarea/index.js 用于导出单个组件，若是要作按需引入，也须要在这里配置

// packages/textarea/index.js

// 导入组件，组件必须声明 name
import Textarea from './main.vue'

// 为组件添加 install 方法，用于按需引入
Textarea.install = function (Vue) { Vue.component(Textarea.name, Textarea) } export default Textarea

 

4、整合并导出组件

编辑 packages/index.js 文件，实现组件的全局注册

// packages / index.js

// 导入单个组件
import Textarea from './textarea/index'

// 以数组的结构保存组件，便于遍历
const components = [ Textarea ] // 定义 install 方法
const install = function (Vue) { if (install.installed) return install.installed = true
    // 遍历并注册全局组件
    components.map(component => { Vue.component(component.name, component) }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { // 导出的对象必须具有一个 install 方法
 install, // 组件列表
 ...components }

到这里组件就已经开发完毕

 

能够在 examples/main.js 中引入该组件

import TagTextarea from '../packages/index' Vue.use(TagTextarea)

而后就能直接使用刚才开发的 textarea 组件

组件的标签就是组件内定义的的 name

这时候能够 npm run serve 启动项目，测试一下组件是否有 bug

// 启动前须要确保已经在 vue.config.js 中添加了新入口 examples/main.js

 

5、打包组件

vue-cli 3.x 提供了一个库文件打包命令

主要须要四个参数：

1. target: 默认为构建应用，改成 lib 便可启用构建库模式

2. name: 输出文件名

3. dest: 输出目录，默认为 dist，这里咱们改成 lib

4. entry: 入口文件路径，默认为 src/App.vue，这里改成 packages/index.js

 

基于此，在 package.json 里的 scripts 添加一个 lib 命令

// pageage.json
 { "scripts": { "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js" } }

而后执行 npm run lib 命令，编译组件

 

6、准备发布

首先须要在 package.json 添加组件信息

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

main: 入口文件，应指向编译后的包文件；

keyword：关键字，以空格分割；

author：做者；

private：是否私有，须要修改成 false 才能发布到 npm；

license：开源协议。

 

而后建立 .npmignore 文件，设置忽略文件

该文件的语法和 .gitignore 的语法同样，设置发布到 npm 时忽略哪些目录或文件

.DS_Store node_modules/ examples/ packages/ public/ vue.config.js babel.config.js *.map *.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs*
*.njsproj *.sln *.sw*

 

7、发布到 npm

若是之前改过 npm 的镜像地址，好比使用了淘宝镜像，就先改回来

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

若是没有 npm 帐户，能够经过 npm adduser 命令建立一个帐户，或者到 npm 官网注册

若是在官网注册的帐户，或者之前就有帐户，就使用 npm login 命令登陆

具体流程能够参考官方文档（谷歌浏览器->翻译中文）

 

在发布以前，必定要确保组件已经编译完毕，并且 package.json 中的入口文件（main）的路径正确

一切就绪，发布组件：

npm publish

 

emmmmmm....

原本到这里就该结束了

不过我想必定有人好奇，文中 textarea 组件究竟是啥（我一点也很差奇）

那就戳这里 -> vue-tag-textarea

// 恬不知耻的求星星...