在前端开发中，使用第三方库或框架是一个非常常见的场景。这时候，有一个工具能够帮助我们解决依赖关系的问题，那就是 rollup。而 rollup-plugin-node-resolve-angular 则是一个专门为了解决 Angular 项目打包时遇到的依赖关系问题而开发的插件。
rollup 简介
rollup 是一个 JavaScript 模块打包器，它的主要作用是将像 npm 这样的模块安装源中的模块文件打包到一个文件中，这个文件可以直接在浏览器中使用。和其他打包工具（如 webpack）相比，rollup 更加轻量级。
rollup-plugin-node-resolve-angular 简介
在使用 Angular 进行前端应用开发时，我们通常会使用 Angular CLI 工具进行项目搭建。这时候，我们需要打包项目代码，这就需要用到 rollup。然而，由于 Angular 与其他一些库的集成使用上较为繁琐，而 rollup 又无法处理这些库之间的依赖关系，因此我们需要在 rollup 中使用 rollup-plugin-node-resolve-angular 这个插件。
rollup-plugin-node-resolve-angular 可以在将 Angular 项目代码打包时，将类似 rxjs、core-js、tslib 等依赖库文件打包到一个文件中，从而使打包后的代码体积更小、运行效率更高。
rollup-plugin-node-resolve-angular 使用教程
为了使用 rollup-plugin-node-resolve-angular 插件，我们需要在初始化的项目文件夹中使用 npm 命令安装 rollup 和 rollup-plugin-node-resolve-angular 这两个依赖：
npm install --save-dev rollup npm install --save-dev rollup-plugin-node-resolve-angular
然后，在项目文件夹中创建 rollup.config.js 文件，并在其中进行 rollup 配置，示例如下：
-- -------------------- ---- -------
------ ------------------ ---- -------------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------------------
------- -----
----- -----
------- -----
---
--
--上面的配置意思是将 src/index.ts 文件通过 rollup 打包成一个名为 bundle.js 的文件，输出到 dist 目录下。其中，我们使用了 nodeResolveAngular 插件，而插件中的参数则表示要将 jsnext、main、module 都处理掉（这些参数的具体含义可以查看插件文档）。
示例代码
为了更好地了解 rollup-plugin-node-resolve-angular 插件的使用，下面就让我们按照上面的教程来实现一个简单的 Angular 应用的打包过程吧。
- 在项目文件夹中使用以下命令来初始化一个 Angular 应用：
ng new my-app
- 进入 my-app 目录，使用 npm 命令安装 rollup，rollup-plugin-node-resolve-angular 以及必须的其他依赖：
cd my-app npm install --save-dev rollup npm install --save-dev rollup-plugin-node-resolve-angular npm install --save-dev @angular/cli npm install --save-dev @rollup/plugin-commonjs npm install --save-dev @rollup/plugin-json
- 创建 rollup.config.js 文件，配置 rollup：
-- -------------------- ---- -------
------ ------------------ ---- -------------------------------------
------ -------- ---- --------------------------
------ ---- ---- ----------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- ------
--
-------- -
-----------
-------
--------------------
------- -----
----- -----
------- -----
---
--
--- 给 package.json 添加一个新的命令 build-rollup，用于使用 rollup 打包应用：
...
"scripts": {
...
"build-rollup": "ng build --prod && rollup -c"
},
...- 运行以下命令，使用 rollup 打包应用：
npm run build-rollup
- 打开 dist 目录下的 index.html 文件，查看打包后的应用运行情况。
指导意义
通过本文，我们了解了 rollup 简介、rollup-plugin-node-resolve-angular 插件的作用、配置以及示例代码。在实际应用开发中，我们可以多学习、多使用类似的前端工具以及 npm 包，提高我们的编程效率，降低我们项目的维护成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739e81e8991b448e9949