Question

我正在构建小型小型React（webpack）聊天应用。我正在使用VoiceLayer作为我的聊天应用程序的后端。它提供web SDK，但问题是我无法访问SDK源代码，只是预先构建的js文件，因此无法像其他模块'npm i voicelayer'那样安装它。 SDK包含5个文件，一个主要的voiclayer.js，具有4个js依赖项。我在webpack conf中添加了这样的加载器：

  {
    test: resolve('./src/utils/voicelayersdk/voicelayer.js'),
    loader: "imports?this=>window",
  },
  {
    test: resolve('./src/utils/voicelayersdk/voicelayer.js'),
    loader: "exports?VoiceLayer",
  },

我可以像这样导入它：

const VoiceLayer = require('../utils/voicelayersdk/voicelayer.js');

但是vicelayer.js仍然需要其他4个依赖项，我在控制台中看到错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:9000/ew.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:9000/rw.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:9000/dw.js Failed to load resource: the server responded with a status of 404 (Not Found)

那么如何以一种可行的方式导入所有这些内容，我尝试导入所有这些内容，如require('../utils/voicelayersdk/sw.js')....;，但没有运气。

同样在初始化VoiceLayer对象时，我可以设置工作目录

const voicelayer = new VoiceLayer(appKey, appSecret, {
  directory: '../utils/voicelayersdk',
});

但我仍然需要以某种方式包含它们，构建后路径不存在。

Answer 1

来自Voicelayer文档：

由于在导入voicelayer.js时会自动导入工作人员，因此开始使用SDK所需的唯一步骤是：<script src="voicelayer.js"></script>;

将脚本包含在其中一个HTML文件中后，应自动加载其他依赖项，前提是它们位于同一文件夹中。

Answer 2

来自VoiceLayer的人回答:-)，所以任何有预先构建的脚本有依赖关系的问题，都可以包含在webpack中

copy-webpack-plugin

我使用webpack创建了一个应用程序并遇到了类似的问题。   如果您不使用webpack，请告诉我您正在使用的内容   我可以调查一下如果您使用的是webpack，请尝试以下操作：   将文件放在vendor中，然后在webpack中使用以下内容   配置。

使用以下命令安装copy-webpack-plugin：npm install --save-dev   copy-webpack-plugin在webpack config中添加：

import CopyWebpackPlugin from 'copy-webpack-plugin';
//...
plugins: [
    // ...
    new CopyWebpackPlugin([
      { from: 'vendor', to: 'scripts/voicelayer' }
    ])
  ],

Webpack和具有依赖关系的外部库

2 个答案: