在 Angular 项目中，我们通常需要使用外部 js 库来扩展应用程序的功能。Angular CLI 提供了 Webpack 打包工具，可以方便地将这些外部 js 文件添加到项目中，并打包成为一个 bundle 文件。本文将介绍如何通过 Angular CLI Webpack 添加和绑定外部 js 文件。
添加外部 js 文件
要添加外部 js 文件，需要先安装该库的 npm 包。以添加 jQuery 库为例：
npm install jquery --save
然后，在 angular.json 文件的 scripts 配置中添加路径：
"scripts": [ "node_modules/jquery/dist/jquery.min.js" ]
现在，jQuery 库已经成功添加到项目中。
绑定外部 js 文件
通过将外部 js 文件打包成一个 bundle 文件，可以优化应用程序的性能。Webpack 可以帮助我们完成这个任务。
首先，需要将上面添加的 jQuery 库从 angular.json 文件中移除，因为我们将使用 webpack 来处理它。然后，安装 webpack 和 webpack-cli：
npm install webpack webpack-cli --save-dev
接下来，创建一个新文件 webpack.config.js 来配置 webpack：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------- --------
-
--这将告诉 webpack，我们的入口文件是 ./src/index.js，输出文件是 bundle.js，并且不应该打包 jQuery 库。
然后，编写 index.js 文件，引入 jQuery 库，并使用它：
import $ from 'jquery';
$(document).ready(function() {
$('body').html('Hello, jQuery!');
});最后，运行 webpack 命令来构建应用程序：
npx webpack --config webpack.config.js
现在，在 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