vue.js - 如何在.vue文件中正确地引用ES5前端库?

问题描述

问 题

我在做一个前端小应用的时候用到了howler.js，但是js文件里面没有 export, 我就不得不在 howler.js 中去写一个 module.exports, 我觉得我使用方式不对。有没有大神可以说一下，怎么使用没有 export 的 js 库?

解决方案

想使用第三方库，如果这个库本身支持npm模块的下，当然直接安装或者直接require就可以了。很多库在其实都支持浏览器的script加载方式和node的require加载方式，要不，下面开头这段代码是干什么的：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.VueAnimatedList = factory());
}(this, function () {
'use strict';
//...
}));

但是如果第三方库不支持module.exports，那么：

1. 要不自己去包装一下，就像你做的

2. 要不按照这个库的设计使用方式，直接在主Hmtl中使用script引用

3. 要不用webpack配置external lib

这篇关于vue.js - 如何在.vue文件中正确地引用ES5前端库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！