加载第三方 javascript 库答案

【问题标题】：Loading a third-party javascript library加载第三方 javascript 库
【发布时间】：2021-01-25 11:05:53
【问题描述】：

我使用 Vue Cli 开发了一个网络广播播放器。现在我必须使用一个外部库（它旨在处理音频广告）添加一个新功能，并且这个库必须由远程主机提供。我不能只下载库并将其导入本地。

设置

在我的 Vue 应用程序中，我有几个组件，其中一个组件有一个音频标签来处理收音机播放。我需要检测播放按钮上的点击，加载广告，播放它，然后进入广播常规播放。

我尝试过的方法

在 index.html 文件中加载外部库。它可以工作，但我无法与 Vue 中加载的播放器交互。例如，如果我尝试收听 index.html 文件中的播放事件（audio.addEventListener("play", onPlay);，我只会在 Web 控制台中收到“音频未定义”。
在我的组件的mounted()部分加载外部库：

const triton = document.createElement('script')
triton.setAttribute('src', '//sdk.listenlive.co/web/2.9/td-sdk.min.js')
document.head.appendChild(triton)
this.initPlayerSDK()
triton.onload = () => {
  let player = new TDSdk(this.tdPlayerConfig)
  console.log(player)
}

这种方法的问题在于，在npm run serve我收到消息'TDSdk' is not defined 之后，这是完全有道理的。我正在加载外部 JS 文件，但 webpack 没有解释它的内容，因为它是在运行时完成的。我必须在我的 vue.config.js 中添加外部，但这也不起作用：

vue.config.js

const path = require('path')

module.exports = {
  publicPath: './',
  /*configureWebpack: {
    externals: {
      tdSdk: 'tdSdk'
    }
  },*/
  chainWebpack: config => {
    config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
    .use('url-loader')
    .loader('file-loader') // not url-loader but file-loader !
    .tap((options) => { // not .option() but .tap(options...)
      // modify the options...
      options.name = 'img/[name].[ext]'
      return options
    }),
    config.externals([
      {
        'tdSdk': 'TDSdk'
      },
    ])
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
        includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
        }
      }
    }
  },
  externals: {
    tdSdk: 'TDSdk'
  }
}

myComponent.vue

import tdSdk from 'tdSdk'

【问题讨论】：

如果您希望 import 工作，请将脚本添加到 HTML。
问题是代码必须来自原始源，而不是来自本地主机。
没有矛盾。修改它。见cli.vuejs.org/guide/html-and-static-assets.html
感谢您的回复。我想我不明白该怎么做。我使用常规
不需要

标签： javascript vue.js webpack

【解决方案1】：

在评估脚本时无法解析导入，因为TDSdk 全局不可用。动态添加到 head 的脚本是异步加载的，因此无论如何都会存在竞争条件。

<script> 如果涉及动态行为或类似条件或开发人员无法控制页面布局，则需要动态添加。对于静态脚本，可以修改Vue CLI项目的publicindex.html：

  <body>
    <div id="app"></div>
    <script src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
    <!-- built files will be auto injected -->
  </body>

在脚本之后评估应用程序包，并且预计全局可用。

Externals 通常用于交换到外部加载的包，通常来自 CDN。由于tdSdk 不是一个真正的包并且没有被交换的前景，因此将其映射到全局并导入它并不是一个好的目的。它可以在应用程序中作为TDSdk global 使用。

【讨论】：

我完全理解你的意思。唯一的问题是 TDSdk 无法从应用程序访问，这是我收到的错误消息。我的解决方法是等待 DOM 准备好（Vue 完全加载），然后将事件侦听器添加到

【解决方案2】：

我的解决方案是在 public/index.html 文件中加载库，然后等待 DOM 被加载，这样我就可以将事件侦听器添加到已加载的音频元素：

document.addEventListener('DOMContentLoaded', function() {
var playControl = document.getElementById('playIcon');
playControl.addEventListener("click", onPlay);
}

然后，在 Vuex 商店中，我需要访问 index.html 中的 javascript 中定义的变量。为此，我将window.adState（我正在使用的变量）设置为我的商店文件中的全局变量：

Vuex.Store.prototype.$adState = window.adState

最后，在我的操作/突变中，我使用了 this.$adState 来检查它的内容：

playPause ({ commit, dispatch }) {
console.log('AdState', this.$adState)
(...)
}

_{代表 OP 添加的答案。}

【讨论】：