在 webpack 中导入非模块供应商脚本

Posted 2023-03-06

【中文标题】在 webpack 中导入非模块供应商脚本

【英文标题】：Import non-module vendor script in webpack

【发布时间】：2017-02-03 22:56:44

【问题描述】：

我正在使用AirConsole JS 服务构建一个应用程序。 AirConsole 仅以 .js 文件的形式提供他们的库，您可以使用通常的方式将其包含在您的页面中：

<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.6.0.js"></script>

但是，我正在使用 Webpack 并希望将 import 脚本放入我的其他 JS 文件中。我尝试了一些没有运气的方法：

创建一个名为vendor 的入口文件，该文件将导入airconsole.js 文件。这将创建一个 vendor.bundle.js 文件，我可以将其包含在我的页面中 将 AirConsole 路径添加到我的 index 入口点，以便脚本包含在 bundle.js 文件中。使用这种方法，我可以验证 AirConsole 代码是否包含在 bundle.js 文件中，但尝试创建 AirConsole 的新实例会导致 AirConsole 未定义

我是否在使用这些方法的正确轨道上？如果不是，那么推荐的导入非模块.js 文件的方法是什么？

【参考方案1】：

最好的方法是我们称之为“匀场”的动作。您可以查看我们的新文档页面以获取信息。对于您的非模块，有几种不同的方法（取决于需要）。

https://webpack.js.org/guides/shimming/

【讨论】：

如果我使用this file，我似乎需要script-loader。当我尝试使用const airconsole = new AirConsole() 创建一个新实例时，它会抛出一个undefined 错误。

另外，script-loader 是在 webpack.config 中工作还是仅用于 require 语句。

您可以在配置中使用的每个加载器（推荐）您都可以使用“包含”属性来定位配置中加载器的文件的特定 abs 路径。