Webpack - 在 Angular 2 中调用外部 JS

Posted 2023-03-07

【中文标题】Webpack - 在 Angular 2 中调用外部 JS

【英文标题】：Webpack - Call external JS in Angular 2

【发布时间】：2017-02-01 23:16:09

【问题描述】：

我希望从 systemJS 换成 webpack。除了让我的一个外部脚本再次运行之外，大多数设置似乎都在工作。

以前使用 systemJS 我有一个设置，我将在我的 index.html 中导入一个外部 .js 脚本。

在我的角度服务中，我可以通过执行以下操作与该脚本进行交互 -

declare var ExternalCode: any;
.
.
.
ExternalCode.RunProcess(data, infomation);

在 webpack 中，我现在有 3 个文件被导出并注入到我的 index.html 中——app.js、vendor.js 和 polyfills.js。在我的供应商文件中，我像这样导入代码，

import "./AppScripts/ExternalCode";

如果我再查看 vendor.js，我会看到我的 ExternalCode 是这样包装的，

(function(module, exports, __webpack_require__) 

   eval( EXTERNAL CODE IS ALL HERE );
)

我似乎无法理解的是我现在如何从我的服务中的 webpack vendor.js 包中调用我的外部代码。无论如何现在可以从我的 Angular 2 服务中导入/运行代码？

我也尝试过在 index.html 文件中再次导入脚本，但是在 webpack-dev-server 上，当我使用 IIS Express 运行项目时，它总是会从用于工作的现有路径抛出 404和 SystemJS。

【问题讨论】：

为什么不试试angular-cli？它会为你处理所有的webpack ceremony。

【参考方案1】：

想出了如何使它像以前使用 SystemJS 一样工作。在上面提到的 vendor.ts 中导入脚本，使其包含在 webpack-dev-server 中。

import "./externaljs/ExternalCode.js";

不要将导入视为在 index.html 的相对位置，只需像这样传递完整路径 -

<script src="./src/externaljs/ExternalCode.js"></script>