加載第三方庫 javascript

Question

我使用 Vue Cli 開發了一個 web 廣播播放器。 現在我必須使用外部庫添加新功能（它旨在處理音頻廣告）並且必須從遠程主機提供該庫。 我不能只下載庫並在本地導入它。

設置

在我的 Vue 應用程序中，我有幾個組件，在其中一個組件中，我有一個處理無線電播放的音頻標簽。 我需要檢測播放按鈕的點擊、加載廣告、播放它然后 go 到收音機常規播放。

我嘗試過的方法

在 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'
  }
}

我的組件.vue

import tdSdk from 'tdSdk'

Answer 1

我的解決方案是在 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 添加的答案。}

Answer 2

由於TDSdk global 不可用，因此在評估腳本時無法解析導入。 動態添加到head的腳本是異步加載的，因此無論如何都會出現競爭條件。

<script>如果涉及動態行為或類似條件或開發人員無法控制頁面布局，則需要動態添加。 對於static腳本，可以修改Vue CLI項目的public index.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>

應用程序包在腳本之后進行評估，並且全局預計在那里可用。

外部通常用於交換到外部加載的包，通常來自 CDN。 由於tdSdk不是真正的 package 並且沒有交換的前景，因此將它 map 到全球並導入它沒有一個好的目的。 它可以在應用程序中作為TDSdk全局使用。

加載第三方庫 javascript

問題描述

2 個解決方案

解決方案1
0

解決方案2
-1 2020-10-10 21:40:01

加載第三方庫 javascript

問題描述

2 個解決方案

解決方案1 0

解決方案2 -1 2020-10-10 21:40:01

解決方案1
0

解決方案2
-1 2020-10-10 21:40:01