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

【问题标题】：Webpack and external libraries with dependenciesWebpack 和具有依赖关系的外部库
【发布时间】：2017-04-23 15:09:01
【问题描述】：

我正在构建小型 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');

但是viclayer.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',
});

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

【问题讨论】：

标签： javascript reactjs webpack dependencies

【解决方案1】：

来自 Voicelayer 文档：

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

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

【讨论】：

它是一个 Node 应用程序，认为它比那个复杂一点:-)
官方文档对安装非常清楚。不知道为什么作为一个 Node.js 应用程序会使它变得更加复杂。 developers.voicelayer.io/docs/main/javascript/sdk.html
仍然没有关注你，只有一个 HTML 文件索引，我无法像在该索引 html 中的常规网页上那样导入它，我将无法在我的任何 js 模块中使用（新VoiceLayer 将是未定义的）。如果我可以像在常规网页中一样添加脚本并使用它，为什么会有节点模块和 webpack 加载器。无论如何，我为 src int 放置的任何路径

【解决方案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' }
    ])
  ],

【讨论】：