极客观点
项目管理
HarmonyOS
问题描述
我在项目中需要使用到一个古老的第三方包, 这个包不依赖任何包, 作者将需要的变量挂载在window上
库的地址: http://annotorious.github.io/
这是库的部分源代码
window.anno = new Y;
Y.prototype.activateSelector = Y.prototype.ba;
Y.prototype.addAnnotation = Y.prototype.J;
Y.prototype.addHandler = Y.prototype.addHandler;
Y.prototype.addPlugin = Y.prototype.zb;
Y.prototype.destroy = Y.prototype.destroy;
Y.prototype.getActiveSelector = Y.prototype.la;
Y.prototype.getAnnotations = Y.prototype.t;
Y.prototype.getAvailableSelectors = Y.prototype.ma;
Y.prototype.hideAnnotations = Y.prototype.ea;
Y.prototype.hideSelectionWidget = Y.prototype.N;
Y.prototype.highlightAnnotation = Y.prototype.o;
Y.prototype.makeAnnotatable = Y.prototype.xc;
Y.prototype.removeAll = Y.prototype.Sb;
Y.prototype.removeAnnotation = Y.prototype.A;
Y.prototype.reset = Y.prototype.reset;
Y.prototype.setActiveSelector = Y.prototype.sb;
Y.prototype.setProperties = Y.prototype.ga;
Y.prototype.showAnnotations = Y.prototype.Da;
Y.prototype.showSelectionWidget = Y.prototype.Z;
window.annotorious || (window.annotorious = {});
window.annotorious.plugin || (window.annotorious.plugin = {});
window.annotorious.geometry || (window.annotorious.geometry = {}, window.annotorious.geometry.expand = Dd, window.annotorious.geometry.getBoundingRect = Cd);
Y.prototype.setSelectionEnabled = Y.prototype.ke;问题出现的环境背景及自己尝试过哪些方法
我尝试过google, 但是大多数是以引入jquery为例, 试验过没有效果;我参考过如何在 Vue.js 中使用第三方库, webpack模板如何在开发环境下引入外部js, shimming,
感觉webpack的官方文档更靠谱一些, 但是当我尝试添加如下代码时依然报错
相关代码
我在第三方库(annotorious.min.js)的末尾添加了
module.exports = annowebpack.base.conf.js
{
test: require.resolve('../static/annotorious-0.6.4/annotorious.min.js'),
use: 'exports-loader?anno'
}main.js
import anno from '../static/annotorious-0.6.4/annotorious.min.js'在组件中可以打印出anno对象
// 使切片可注释
console.log( anno )
anno.makeAnnotatable(viewer)
然而在使用内部方法anno.makeAnnotatable()时报错:
[Vue warn]: Error in mounted hook: "Error: Annotorious does not support this media type in the current version or build configuration."我也试过在组件中引入, 同样报错
import anno from '../../../static/annotorious-0.6.4/annotorious.min.js'
export default {
// ...
}
看错误的话，和 vue 本身关系不大，只是在 mounted 阶段报错而已。
你引用的方式没用问题，但是其实不用这么麻烦，直接在 index.html 中引入即可，这样就是全局注册了，你可能遇到的问题是，由于你使用了 webpack，那么在导入包的时候，期望使用 import 的语法来导入包，而不是直接用全局变量（虽然也可以，但是可能 eslint 之类的工具会报错，同样可以在其设置内配置全局变量），那你可以通过 webpack 的 external 设置，声明外部第三方的变量，一般针对 lodash、jquery 都会这么设置的。如果不用 external 方式的话，每次导入算作一个 chunk，那么可能会存在冗余，其实并不是最好的方式。
如有错误，还望指正。