Memento

Appearance

405
1 minutes

vitepress-plugin-music开发记录 ​

它是什么 ​

vitepress-plugin-music 是为 vitepress 开发的拓展插件。

旨在简单的传入歌单列表数据后，即可在网站上播放音频的插件。

使用技术 ​

  • 使用 typescript 开发
  • 使用 vue template 模版渲染
  • 使用 vite 进行打包

遇到问题 ​

使用unbuild打包时遇到的问题 ​

本想像 vitepress-plugin-nprogress 与 vitepress-plugin-google-analytics 一样，使用 unbuild 进行打包。

但在 yarn build 时，遇到报错 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) 。应该是 unbuild 不能解析vue文件造成的错误，目前没有找到解决方案，对应Issue。

遂放弃使用 unbuild ，转而使用 vite 进行打包。毕竟是vitepress项目，可以直接使用vite，还可以少安装一个依赖。

使用vite打包lib注意的事 ​

  1. 配置 vite.config.ts 的 build.rollupOptions.external，用来把 vue 依赖包的内容排除在外（因为使用本plugin的主项目一定已经安装了vue，可以在 打包JavaScript库的现代化指南 看到之所以要这样做的更详细的介绍）。
ts
build: {
  rollupOptions: {
    external: ['vue'],
  }
}

todo ​

  • 避免需要单独引入css，css文件混入js

参考 ​