Angular Cli Webpack,如何添加或绑定外部 js 文件?

在 Angular 项目中,我们通常需要使用外部 js 库来扩展应用程序的功能。Angular CLI 提供了 Webpack 打包工具,可以方便地将这些外部 js 文件添加到项目中,并打包成为一个 bundle 文件。本文将介绍如何通过 Angular CLI Webpack 添加和绑定外部 js 文件。

添加外部 js 文件

要添加外部 js 文件,需要先安装该库的 npm 包。以添加 jQuery 库为例:

--- ------- ------ ------

然后,在 angular.json 文件的 scripts 配置中添加路径:

---------- -
  ----------------------------------------
-

现在,jQuery 库已经成功添加到项目中。

绑定外部 js 文件

通过将外部 js 文件打包成一个 bundle 文件,可以优化应用程序的性能。Webpack 可以帮助我们完成这个任务。

首先,需要将上面添加的 jQuery 库从 angular.json 文件中移除,因为我们将使用 webpack 来处理它。然后,安装 webpackwebpack-cli

--- ------- ------- ----------- ----------

接下来,创建一个新文件 webpack.config.js 来配置 webpack:

----- ---- - ----------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ---------- -
    ------- --------
  -
--

这将告诉 webpack,我们的入口文件是 ./src/index.js,输出文件是 bundle.js,并且不应该打包 jQuery 库。

然后,编写 index.js 文件,引入 jQuery 库,并使用它:

------ - ---- ---------

---------------------------- -
  ---------------------- ----------
---

最后,运行 webpack 命令来构建应用程序:

--- ------- -------- -----------------

现在,在 dist 目录中会生成一个名为 bundle.js 的文件,其中包含了 jQuery 库和我们的代码。可以通过在 HTML 中引用该文件来加载应用程序。

结论

通过 Angular CLI Webpack,我们可以轻松地添加和绑定外部 js 文件,并通过 webpack 打包成一个 bundle 文件来优化性能。这对于扩展应用程序的功能非常有帮助。

示例代码:https://github.com/username/repo/tree/branch/path/to/code

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/25336