Fatal编程技术网

加载第三方javascript库

javascript vue.js webpack

加载第三方javascript库,javascript,vue.js,webpack,Javascript,Vue.js,Webpack,我使用Vue Cli开发了一个web广播播放器。现在，我必须使用一个外部库添加一个新功能（它旨在处理音频广告），并且必须从远程主机提供此库。我不能只是下载库并在本地导入它 设置 在我的Vue应用程序中，我有几个组件，其中一个组件中有一个音频标签，用于处理收音机播放。我需要检测播放按钮上的点击，加载广告，播放它，然后转到收音机常规播放 我尝试过的方法 在index.html文件中加载外部库。它可以工作，但我无法与正在Vue中加载的播放器交互。例如，如果我尝试在index.html文件（audio.

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

设置

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

我尝试过的方法

  • 在index.html文件中加载外部库。它可以工作，但我无法与正在Vue中加载的播放器交互。例如，如果我尝试在index.html文件（
    audio.addEventListener（“play”，onPlay）；
    中收听播放事件，我只会在web控制台中收到“audio not defined”
  • 在我的组件的mounted（）部分加载外部库：
    • 这种方法的问题是，在
    npm run serve
    之后，我收到消息
    'TDSdk'未定义
    ，这是完全有意义的。我正在加载外部JS文件，但webpack没有解释其内容，因为它是在运行时完成的。我必须在我的vue.config.JS中添加外部文件，但这不起作用r:

    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'
    在评估脚本时无法解析导入，因为
    TDSdk
    global不可用。动态添加到
    head
    的脚本将异步加载，因此将存在任何竞争条件

    如果涉及到动态行为或类似情况，或者开发人员无法控制页面布局，则需要动态添加
    。对于静态脚本，可以修改Vue CLI项目的公共：

      <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
    全局

    我的解决方案是在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
    最后，在我的操作/变化中，我使用了这个.adState来检查它的内容：

    playPause ({ commit, dispatch }) {
console.log('AdState', this.$adState)
(...)
}
    代表OP添加答案。

    如果希望
    import
    工作，请将脚本添加到HTML。问题是，代码必须从原始源代码提供，而不是从localhost提供。没有矛盾。请修改它。谢谢您的回复。我想我不明白如何操作。我导入了带有常规标记的库，它确实如此esn不起作用。如果有办法使用语法，我就不明白了。我不需要完全理解你的观点。唯一的问题是TDSdk无法从应用程序访问，这就是我收到的错误消息。我的解决方法UI是等待DOM准备就绪（Vue完全加载）然后将事件侦听器添加到元素：document.addEventListener（'DOMContentLoaded'，function（）{document.getElementById（'audio'）.addEventListener（“play”，onPlay）；}）；这种方法的问题是我无法与ad对象交互，因为它无法从我的应用程序访问。 
    playPause ({ commit, dispatch }) {
console.log('AdState', this.$adState)
(...)
}