程序员经验分享-hwhale

使用 Systemjs-builder 为 Angular2 应用程序创建多个包

2023-12-02

我有一个可用的 Angular2 应用程序，其结构如下：

/app
    /components
        /moduleA
        /moduleB
        /...
    /shared
    app.module.ts
    app.routing.ts
    app.component.ts
    main.ts

现在，我使用 systemjs-builder 在我的 gulp 文件中创建一个包含所有打字稿的单个文件：

gulp.task('bundle', () => {
  builder.buildStatic('app/*.js', 'web/bundle.app.js')
  .then(function() {
    console.log('Build complete');
  })
})

然后在我的应用程序的 index.html 中：

<body>
    <app>Loading...</app>
    <!-- application bundle -->
    <script src="bundle.app.js"></script>
</body>

现在一切正常，但我的应用程序正在增长为多个模块，我想将其拆分为不同的模块文件，因此我将common.js用于/app/shared模块，而不是bundle.app.js，然后/app/components 内的所有其他模块的 moduleA.js、moduleB.js 等。

这可以用 systemjs-builder 来完成吗？这必须是一个非常常见的功能，但我在文档中看不到任何内容。

EDIT:我设法创建了一些像这样的包

gulp.task('bundle', () => {
  builder.buildStatic('app/*.js - app/components/**/*.js', 'web/common.js')
  .then(function() {
    console.log('Build complete');
  });

  builder.bundle('app/components/moduleA/**/*.js', 'web/moduleA.js');
  builder.bundle('app/components/moduleB/**/*.js', 'web/moduleB.js');
})

但我不认为这完全没问题；我以前的单个包是 2,267KB，现在我的 3 个模块是 785KB (common.js) + 2,567KB (moduleA.js) + 1,530KB (moduleB.js)，这没有意义。

如果我检查 moduleS 和模块包内的代码，我可以看到 Angular2 模块以及只应在 common.js 中的内容


您必须使用 Bundle Arithmetic 来丢弃依赖项：https://github.com/systemjs/builder#bundle-arithmetic

您必须在不引用公共文件的情况下构建模块和模块。

获得它的一种方法是采用以下结构：

/app
    app.module.ts
    app.routing.ts
    app.component.ts
/modules
    /moduleA
    /moduleB
    /...
/shared
main.ts

Then:

gulp.task('bundle', () => {
  builder.buildStatic('app/**/*.js - /modules/** - /shared/**', 'web/app.js')
  builder.buildStatic('shared/**/*.js', 'web/common.js');

  builder.bundle('modules/moduleA/**/*.js - shared/**', 'web/moduleA.js');
  builder.bundle('modules/moduleB/**/*.js - shared/**', 'web/moduleB.js');
})

在你的html中：

<body>
    <app>Loading...</app>
    <!-- application bundle -->
    <script src="common.js"></script>
    <script src="moduleA.js"></script>
    <script src="moduleB.js"></script>
    <script src="app.js"></script>
    <script>
        Sytem.import(main ... balbla);
    </script>

</body>

此外，您还可以根据需要加载捆绑包，并配置 systemjs 来实现：https://github.com/systemjs/systemjs/blob/master/docs/product-workflows.md#bundle-extension

如果配置它，您可以使用：

<body>
    <app>Loading...</app>
    <script>
        Sytem.import(main ... balbla);
    </script>

</body>

Systemjs 在需要时加载每个包。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

systemjs

使用 Systemjs-builder 为 Angular2 应用程序创建多个包 的相关文章

随机推荐

  • 显示 Oracle SQL 中表的所有约束的名称

    我已经为在 Oracle SQL 中创建的多个表的每个约束定义了一个名称 问题是 要删除特定表的列的约束 我需要知道为每个约束提供的名称 但我已经忘记了 如何列出为表的每一列指定的所有约束名称 有没有这样的SQL语句 您需要查询数据字典 具

  • 使用 Powershell 删除 csv 文件末尾的空行

    我需要使用 Powershell 删除 CSV 文件末尾的空行 我尝试了下面的代码 此代码仅用于删除下面示例文件图像中的第 7 行和第 8 行 但我需要删除第 3 4 5 6 7 和 8 行 只有第 2 行有数据 任何建议将不胜感激 谢谢

  • 从另一个 js 文件导入函数。 JavaScript

    我有一个关于在 javascript 中包含文件的问题 我有一个非常简单的例子 gt index html gt models gt course js gt student js 课程 js function Course this id

  • 如何在c# Microsoft graph api请求中获取响应标头

    我正在尝试做文件复制使用 Microsoft graph API 在 c net core 中进行操作 这是一个异步操作 根据文档 它说它返回一个位置响应头检查操作的状态 现在的问题是我需要它的响应标头 以便我可以检查文件复制操作的状态 但

  • 合并两个图像 --> 4 倍大小！如何减小文件大小？

    我使用下面的代码合并两个图像 一张不透明的基础图像 一张透明的覆盖图像 其拥有的图像文件大小分别为 20kb 和 5kb 合并两个图像后 生成的文件大小 gt 100kb 因此至少是 25kb 组合大小的 4 倍 我预计文件大小小于 25k

  • 错误2 系统找不到Sublime Text 2、Windows 8中指定的文件

    刚刚安装了 Sublime Text 2 尝试构建 hello world 程序 并收到以下消息 Error 2 The system cannot find the file specified cmd u g u u o u dir C

  • Facebook 评论插件 - 每个页面上都有相同的评论

    我网站上的 Facebook 评论效果很好 但当有人对一篇文章发表评论时 网站上的每篇文章都会出现 相同的评论 显然 我不希望这样 我所做的基本上是复制并粘贴在developers facebook com上提供的代码 div div

  • 如何在Python极坐标中添加持续时间到日期时间

    我想在日期 时间中添加以秒为单位的持续时间 我的数据看起来像 import polars as pl df pl DataFrame dt 2022 12 14T00 00 00 2022 12 14T00 00 00 2022 12 14

  • Python 入门：属性错误

    我是 python 新手 今天刚刚下载 我正在使用它来处理网络蜘蛛 因此为了对其进行测试并确保一切正常 我下载了示例代码 不幸的是 它不起作用并给了我错误 AttributeError MyShell 对象没有属性 已加载 我不确定代码本身

  • 通过 VSTS CI/CD 升级 Azure Service Fabric 时出错

    我正在使用 VSTS 来设置 CI CD 以进行服务结构构建和部署 第一次部署没有错误 但第二次更新部署给出了以下错误 ConfigPackage中的内容名称 Config 版本 1 0 0 20180312 1 服务清单中的 Sample

  • 苹果手表上的图像

    昨天我的申请被拒绝时遇到了一个问题 显然 这些图像并未显示在实际的 Apple Watch 上 但它们显示在模拟器中 我什至尝试重置模拟器 但无法复制苹果员工发生的问题 所以我只是想知道在苹果手表上添加 显示图像的正确方法是什么 这样它们才

  • spring jpa hibernate 具有更多数据源

    我必须在我的应用程序 spring 中使用两个不同的数据库和 Hibernate Jpa 我想直接为不同的数据源定义不同的表 所以我使用两个不同的持久性单元并尝试使用

  • OpenTsdb：度量和标签信息中是否允许空格字符

    我正在使用 openTsdb 并遇到了度量 标记 tagk 甚至值 tagv 中不允许空格字符的问题 有什么方法可以至少在标签的值中添加空格吗 我还提到 http opentsdb net docs build html user guid

  • Angular 通用服务器端渲染、元标签

    我将网站移至 Angular 通用 SSR 在我搬家的过程中 我遇到了一些问题 我认为 ng universal 可以解决这些问题 我想添加元标记 例如描述 关键字等 每个页面不同 使用titleService正如 Angular 所建议的

  • Unity3d - eulerAngles（本地和全局）与检查器中的完全不同

    在游戏对象的检查器中 我使用的起始旋转是 90 但是当我运行时print transform eulerAngles x 我得到 270 同上transform localEulerAngles x 如果我倾斜gameObject向下 检查

  • Hibernate 创建冗余的多对多表

    在开发 Spring Boot 应用程序时 我必须删除数据库并让 Hibernate 再次生成它hibernate hbm2ddl auto update 之后 我想确保它按照我想要的方式执行所有操作 因此我调用 MySQL Workben

  • 从 url 加载图像

    我有一个图像网址 我想在 ImageView 中显示此 URL 中的图像 但我无法做到这一点 如何才能实现这一目标 如果您根据按钮单击加载图像 则上面接受的答案非常好 但是如果您在新活动中执行此操作 它会使 UI 冻结一两秒 环顾四周 我发

  • 单击后如何关闭此菜单

    我正在尝试定制这个菜单 这是 html 标记 ul class topnav li a href home Home a li li a href news News a li li a href contact Contact a li

  • 通过 multipart-HTML-Post 上传 pdf 确实会更改文件

    我尝试使用以下代码通过 vba 的多部分上传 pdf Public Function sap upload ByVal par objectID As String ByVal par description As String ByVal

  • 使用 Systemjs-builder 为 Angular2 应用程序创建多个包

    我有一个可用的 Angular2 应用程序 其结构如下 app components moduleA moduleB shared app module ts app routing ts app component ts main ts

热门标签