在前端开发中，我们常常需要将 Angular 应用打包成一个可执行的 JavaScript 文件。rollup-plugin-angular 是一个专门为 Angular 应用设计的 Rollup 插件，它能够将 Angular 组件和模板打包成单独的 JavaScript 模块，并且支持 Ahead-of-Time (AOT) 编译，从而提高应用的性能和加载速度。
安装 rollup-plugin-angular
使用 npm 安装 rollup-plugin-angular：
npm install --save-dev rollup-plugin-angular
配置 rollup-plugin-angular
在 Rollup 的配置文件中，添加 rollup-plugin-angular 插件：
import angular from 'rollup-plugin-angular'; export default { // ... plugins: [ angular() ] };
此外，如果需要编译 TypeScript 或 ES2015+ 代码，还需要添加对应的 Rollup 插件。例如，使用 @rollup/plugin-typescript 和 @rollup/plugin-babel 分别编译 TypeScript 和 ES2015+ 代码：
-- -------------------- ---- ------- ------ ---------- ---- ---------------------------- ------ ----- ---- ----------------------- ------ ------- ---- ------------------------ ------ ------- - -- --- -------- - ------------- ------- ------------- --------- --- --------- - --展开代码
使用 rollup-plugin-angular
编写 Angular 组件和模板
首先，我们需要编写 Angular 组件和模板。例如，下面是一个简单的组件：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------ --------- ----------- --------------- -- ------ ----- -------------- - ---- - -------- -展开代码
导入组件和模板
我们需要将组件和模板导出为一个单独的 JavaScript 模块。在组件文件中，添加以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- -------------------- ----------- -------- ---------------- ------------- ----------------- -------- ---------------- -- ------ ----- ----------- --展开代码
打包应用
使用 rollup 命令打包应用：
rollup -c rollup.config.js
其中，rollup.config.js 是 Rollup 的配置文件，可以配置输入文件、输出文件等参数。例如，下面是一个简单的配置文件：
-- -------------------- ---- ------- ------ ------- ---- ------------------------ ------ ------- - ------ -------------- ------- - ----- ----------------- ------- ------ -- -------- - --------- - --展开代码
打包完成后，会生成一个 dist/bundle.js 文件，包含了应用的所有依赖和代码。
在 HTML 中引入应用
最后，在 HTML 页面中引入打包后的 JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ------- ----------- ------- ------ ----------------------- ------- ------------------------------ ------- -------展开代码
这样就可以在页面中使用 <app-hello> 标签显示 HelloComponent 组件了。
总结
rollup-plugin-angular 是一个非常实用的 Rollup 插件，可以帮助我们快速打包 Angular 应用并提高性能。通过本文的介绍，读者可以学习到如何安装和配置 rollup-plugin-angular，并编写和打包一个简单的 Angular 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54985
