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

更新日期: 2018-12-29阅读: 4k标签: npm

为了摆脱咸鱼的身份,我给自己定了一个开源项目的目标

于是抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题

之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改

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

在踩了一天的坑之后,终于成功发布了一个小插件,于是记个笔记

 

一、调整项目结构

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

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

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


首先需要创建一个 packages 目录,用来存放组件

然后将 src 目录改为 examples 用作示例


 

二、修改配置

启动项目的时候,默认入口文件是 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

 

三、开发组件

之前已经创建了一个 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

 

四、整合并导出组件

编辑 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

 

五、打包组件

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 命令,编译组件

 

六、准备发布

首先需要在 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*

 

七、发布到 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


原文:https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html


链接: https://www.fly63.com/article/detial/1720

在5分钟内搭建企业内部私有npm仓库

下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。启动并配置服务、设置注册地址、登录cnpm、包上传到私有仓库、查看预览包、通过verdaccio搭建....

使用webpack开发npm插件

webpack:解析js文件,无法解析的文件需要借助loader,npm插件发布(vue&webpack&单页面):npm init =>package.json,创建.vue文件 =>插件界面及功能,index.js =>入口文件

npm命令大全_整理NPM常用命令

NPM是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。这篇文章整理NPM常用的一些命令

npm 执行多个命令_如何用npm同时执行多条监听命令

直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?

npm和bower的关系和区别

npm和bower太像了,就像一对孪生兄弟…… npm的文件是package.json,包安装的目录是node_modules。 bower的文件是bower.json,包安装的目录是bower_components。使用命令也基本一致

npm run build根据不同参数打包不同环境url

这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx,根据传递参数xxx来判定不同的环境,给出不同的域名配置,具体内容详情大家参考下:config文件夹下dev.env.js中修改代码、prod.env.js中修改代码 HOST为截取到的参数

npm安装模块时报错:no such file or directory

使用node.js和npm,在安装模块的时候报错npm WARN saveError ENOENT: no such file or directory, open ...的解决办法。这个原因就是因为项目没有进行初始化,缺少package.json文件造成的。需要package.json才能npm install。 可以npm init初始化生成一个package.json。

前端npm 安装包,精选大全集合

如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择。挑选模块可能很难,但您只需要一些方法点来解决它。当您正在为如何抉择浪费时间,或者甚至不知道从哪里开始时,请使用本指南来帮助您。

关于 npm run eject 报错的问题

关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git

在NPM发布自己造的轮子

自从Node.js出现,它的好基友npm(node package manager)也是我们日常开发中必不可少的东西。npm让js实现了模块化,使得复用其他人写好的模块(搬砖)变得更加方便,也让我们可以分享一些自己的作品给大家使用(造轮子)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!