VuePress中引用videojs库报global is not defined

近期给内部DataV模板项目编写组件库文档，用到了vuepress（版本^1.9.10）。起初导入了一堆组件来编写Demo文档都没遇到问题，直到开始写视频播放器组件的Demo…

因为大屏需求中的视频格式既有mp4视频，也有m3u8格式（视频录播 or 摄像头直播流）。所以用到了video.js和videojs-contrib-hls包。一顿操作把组件移植到了vuepress、安装依赖、启动项目后，成功看到了页面白屏及报错信息。

翻看组件代码，和模板项目里没有区别，也没有进行额外配置。

1
2
3
4
5
6
7
8
9
10
11

<template>
    ...
</template>

<script>
    import 'video.js'
    import 'videojs-contrib-hls'
    import 'video.js/dist/video-js.css'

    ...
</script>

尝试1：将组件引入的代码移至docs/.vuepress/enhanceApp.js

1
2
3
4
5
6
7

import 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'

export default async ({ Vue }) => {
    ...
}

测试了几次，结果分别如下：
1、保留全部导入内容：重启项目刷新页面，报错结果依旧存在。
2、单独保留import 'video.js'：重启项目刷新页面，报错结果依旧存在。
3、单独保留import 'videojs-contrib-hls'：重启项目刷新页面，报错结果依旧存在。
4、单独保留'video.js/dist/video-js.css'：重启项目刷新页面，恢复内容显示。

看来问题应该出在包的js本身，不排除webpack本身差异导致的编译问题（在vue-cli项目中是正常的，在vuepress项目中会报错并白屏）。

尝试2：尝试将window变量映射到global上

之前遇到过globalThis未定义的问题，最后是把window映射到了window.globalThis上解决的。这里也尝试了下这个解决方法。

1
2
3
4
5
6
7
8
9

import 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'

export default async ({ Vue }) => {
    if (typeof window.global === 'undefined') {
    	window.global = window
    }
}

测试结果：重启项目刷新页面，报错结果依旧存在。

尝试3：通过CDN的方式，引用相关资源包

编辑docs/.vuepress/config.js文件，添加以下内容：

1
2
3
4
5
6
7

module.exports = {
    head: [
        ['link', { rel: 'stylesheet', href: 'https://vjs.zencdn.net/8.9.0/video-js.css' }],
        ['script', { src: 'https://vjs.zencdn.net/8.9.0/video.min.js' }],
        ['script', { src: 'https://unpkg.com/@videojs/http-streaming@3.9.1/dist/videojs-http-streaming.min.js' }],
    ]
}

测试结果：成功运行组件Demo。