关于javascript:从零实现一个-VuePress-插件

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。

但在搭建 VuePress 博客的过程中，也并不是所有的插件都能满足需要，所以本篇咱们以实现一个代码复制插件为例，教大家如何从零实现一个 VuePress 插件。

本地开发

开发插件第一个要解决的问题就是如何本地开发，咱们查看 VuePress 1.0 官网文档的「开发插件」章节，并没有找到解决方案，但在 VuePress 2.0 官网文档的「本地插件」里，却有写道：

举荐你间接将配置文件作为插件应用，因为简直所有的插件 API 都能够在配置文件中应用，这在绝大多数场景下都更为不便。
然而如果你在配置文件中要做的事件太多了，最好还是将它们提取到独自的插件中，而后通过设置绝对路径或者通过 require 来应用它们：

module.exports = {  plugins: [    path.resolve(__dirname, './path/to/your-plugin.js'),    require('./another-plugin'),  ],}

那就让咱们开始吧！

初始化我的项目

咱们在 .vuepress 文件夹下新建一个 vuepress-plugin-code-copy 的文件夹，用于寄存插件相干的代码，而后命令行进入到该文件夹，执行 npm init，创立 package.json，此时文件的目录为：

.vuepress├─ vuepress-plugin-code-copy │  └─ package.json└─ config.js

咱们在 vuepress-plugin-code-copy下新建一个 index.js 文件，参照官网文档插件示例中的写法，咱们应用返回对象的函数模式，这个函数承受插件的配置选项作为第一个参数、蕴含编译期上下文的 ctx 对象作为第二个参数：

module.exports = (options, ctx) => {   return {      // ...   }}

再参照官网文档 Option API 中的 name，以及生命周期函数中的 ready 钩子，咱们写一个初始的测试代码：

module.exports = (options, ctx) => {    return {        name: 'vuepress-plugin-code-copy',        async ready() {            console.log('Hello World!');        }    } }

此时咱们运行下 yarn run docs:dev，能够在运行过程中看到咱们的插件名字和打印后果：

插件设计

当初咱们能够构想下咱们的代码复制插件的成果了，我想要实现的成果是：

在代码块的右下角有一个 Copy 文字按钮，点击后文字变为 Copied！而后一秒后文字从新变为 Copy，而代码块里的代码则在点击的时候复制到剪切板中，冀望的体现成果如下：

插件开发

如果是在 Vue 组件中，咱们很容易实现这个成果，在根组件 mounted 或者 updated的时候，应用 document.querySelector获取所有的代码块，插入一个按钮元素，再在按钮元素上绑定点击事件，当触发点击事件的时候，代码复制到剪切板，而后批改文字，1s 后再批改下文字。

那 VuePress 插件有办法能够管制根组件的生命周期吗？咱们查阅下 VuePress 官网文档的 Option API，能够发现 VuePress 提供了一个 clientRootMixin 办法：

指向 mixin 文件的门路，它让你能够管制根组件的生命周期

看下示例代码：

// 插件的入口const path = require('path')module.exports = {  clientRootMixin: path.resolve(__dirname, 'mixin.js')}

// mixin.jsexport default {  created () {},  mounted () {}}

这不就是咱们须要的吗？那咱们入手吧，批改 index.js的内容为：

const path = require('path');module.exports = (options, ctx) => {    return {        name: 'vuepress-plugin-code-copy',        clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')    } }

在 vuepress-plugin-code-copy下新建一个 clientRootMixin.js文件，代码写入：

export default {    updated() {        setTimeout(() => {            document.querySelectorAll('div[class*="language-"] pre').forEach(el => {                                console.log('one code block')            })        }, 100)    }}

刷新下浏览器里的页面，而后查看打印：

接下来就要思考如何写入按钮元素了。

当然咱们能够应用原生 JavaScript 一点点的创立元素，而后插入其中，但咱们其实是在一个反对 Vue 语法的我的项目里，其实咱们齐全能够创立一个 Vue 组件，而后将组件的实例挂载到元素上。那用什么办法挂载呢？

咱们能够在 Vue 的全局 API 里，找到 Vue.extendAPI，看一下应用示例：

// 要挂载的元素<div id="mount-point"></div>

// 创立结构器var Profile = Vue.extend({  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',  data: function () {    return {      firstName: 'Walter',      lastName: 'White',      alias: 'Heisenberg'    }  }})// 创立 Profile 实例，并挂载到一个元素上。new Profile().$mount('#mount-point')

后果如下：

// 后果为:<p>Walter White aka Heisenberg</p>

那接下来，咱们就创立一个 Vue 组件，而后通过 Vue.extend 办法，挂载到每个代码块元素中。

在 vuepress-plugin-code-copy下新建一个 CodeCopy.vue 文件，写入代码如下：

<template>    <span class="code-copy-btn" @click="copyToClipboard">{{ buttonText }}</span></template><script>export default {    data() {        return {            buttonText: 'Copy'        }    },    methods: {        copyToClipboard(el) {            this.setClipboard(this.code, this.setText);        },        setClipboard(code, cb) {            if (navigator.clipboard) {                navigator.clipboard.writeText(code).then(                    cb,                    () => {}                )            } else {                let copyelement = document.createElement('textarea')                document.body.appendChild(copyelement)                copyelement.value = code                copyelement.select()                document.execCommand('Copy')                copyelement.remove()                cb()            }        },        setText() {            this.buttonText = 'Copied!'            setTimeout(() => {                this.buttonText = 'Copy'            }, 1000)        }    }}</script><style scoped>.code-copy-btn {    position: absolute;    bottom: 10px;    right: 7.5px;    opacity: 0.75;    cursor: pointer;    font-size: 14px;}.code-copy-btn:hover {    opacity: 1;}</style>

该组件实现了按钮的款式和点击时将代码写入剪切版的成果，整体代码比较简单，就不多叙述了。

咱们批改一下 clientRootMixin.js：

import CodeCopy from './CodeCopy.vue'import Vue from 'vue'export default {    updated() {        // 避免阻塞        setTimeout(() => {            document.querySelectorAll('div[class*="language-"] pre').forEach(el => {                  // 避免反复写入                if (el.classList.contains('code-copy-added')) return                let ComponentClass = Vue.extend(CodeCopy)                let instance = new ComponentClass()                instance.code = el.innerText                instance.$mount()                el.classList.add('code-copy-added')                el.appendChild(instance.$el)            })        }, 100)    }}

这里留神两点，第一是咱们通过 el.innerText 获取要复制的代码内容，而后写入到实例的 code 属性，在组件中，咱们是通过 this.code获取的。

第二是咱们没有应用 $mount(element)，间接传入一个要挂载的节点元素，这是因为 $mount() 的挂载会清空指标元素，然而这里咱们须要增加到元素中，所以咱们在执行 instance.$mount()后，通过 instance.$el获取了实例元素，而后再将其 appendChild 到每个代码块中。对于 $el的应用能够参考官网文档的 el 章节。

此时，咱们的文件目录如下：

.vuepress├─ vuepress-plugin-code-copy │  ├─ CodeCopy.vue│  ├─ clientRootMixin.js│  ├─ index.js│  └─ package.json└─ config.js

至此，其实咱们就曾经实现了代码复制的性能。

插件选项

有的时候，为了减少插件的可拓展性，会容许配置可选项，就比方咱们不心愿按钮的文字是 Copy，而是中文的「复制」，复制完后，文字变为「已复制！」，该如何实现呢？

后面讲到，咱们的 index.js导出的函数，第一个参数就是 options 参数：

const path = require('path');module.exports = (options, ctx) => {    return {        name: 'vuepress-plugin-code-copy',        clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')    } }

咱们在 config.js先写入须要用到的选项：

module.exports = {    plugins: [      [        require('./vuepress-plugin-code-copy'),        {          'copybuttonText': '复制',          'copiedButtonText': '已复制！'        }      ]    ]}

咱们 index.js中通过 options参数能够接管到咱们在 config.js 写入的选项，但咱们怎么把这些参数传入 CodeCopy.vue 文件呢？

咱们再翻下 VuePress 提供的 Option API，能够发现有一个 define API，其实这个 define 属性就是定义咱们插件外部应用的全局变量。咱们批改下 index.js：

const path = require('path');module.exports = (options, ctx) => {    return {        name: 'vuepress-plugin-code-copy',        define: {            copybuttonText: options.copybuttonText || 'copy',            copiedButtonText: options.copiedButtonText || "copied!"        },        clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')    } }

当初咱们曾经写入了两个全局变量，组件里怎么应用呢？答案是间接应用！

咱们批改下 CodeCopy.vue 的代码：

// ...<script>export default {    data() {        return {            buttonText: copybuttonText        }    },    methods: {        copyToClipboard(el) {            this.setClipboard(this.code, this.setText);        },        setClipboard(code, cb) {            if (navigator.clipboard) {                navigator.clipboard.writeText(code).then(                    cb,                    () => {}                )            } else {                let copyelement = document.createElement('textarea')                document.body.appendChild(copyelement)                copyelement.value = code                copyelement.select()                document.execCommand('Copy')                copyelement.remove()                cb()            }        },        setText() {            this.buttonText = copiedButtonText            setTimeout(() => {                this.buttonText = copybuttonText            }, 1000)        }    }}</script>// ...

最终的成果如下：

代码参考

残缺的代码查看：https://github.com/mqyqingfeng/Blog/tree/master/demos/VuePress/vuepress-plugin-code-copy

其实本篇代码是参考了 Vuepress Code Copy Plugin这个插件的代码，点击查看源码地址。

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，解说如何应用 VuePress 搭建博客，并部署到 GitHub、Gitee、集体服务器等平台。

一篇带你用 VuePress + GitHub Pages 搭建博客
一篇教你代码同步 GitHub 和 Gitee
还不会用 GitHub Actions ？看看这篇
Gitee 如何主动部署 Pages？还是用 GitHub Actions!
一份前端够用的 Linux 命令
一份简略够用的 Nginx Location 配置解说
一篇从购买服务器到部署博客代码的具体教程
一篇域名从购买到备案到解析的具体教程
VuePress 博客优化之 last updated 最初更新工夫如何设置
VuePress 博客优化之增加数据统计性能
VuePress 博客优化之开启 HTTPS
VuePress 博客优化之开启 Gzip 压缩

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。