问题标签 [systemjs-builder]

我正在使用 Typescript、ES6 模块语法和 SystemJS / builder。

我想要做的基本要求是：

• 使用 @types 包启用打字稿代码完成（也适用于全局 npm 安装）
• 使用 ES6 模块导入语法（例如import * as _ from 'lodash'）
• 让构建器从构建中排除全局变量，并在开发/生产中使用 CDN url 正确导入它们。

我用于构建和开发/生产环境的配置只是为了让它运行起来：

从这里我有一个 npm 任务，它转译为 ES6，然后通过 babel 插件将所有内容捆绑到一个文件中。该脚本直接加载到生产页面上并加载。问题是，一旦全局依赖项导入，由于 systemjs 将 CDN 导入与像

{default: _ } //_ is the actual lodash export

我已经成功地将导入更改为，import _ from 'lodash' 但随后出现 IDE 错误，因为 lodash（也没有任何其他全局脚本，如 angular）没有导出默认值，并且我失去了代码完成。

在这里使用 systemjs / builder 满足要求的正确方法是什么？

作为旁注，如果效果更好，我可以使用脚本标签加载而不是 systemjs CDN 导入。

更新：它在没有修复的情况下再次工作

我看https://www.npmjs.com/package/@types/node，他们已经更新了，我的项目失败了。

7 天前，它在 Travis 上工作和构建测试

https://travis-ci.org/AngularVN/angular4-seed/jobs/235774520

现在，它有一个重大问题，帮助我

我用我的笔记本电脑再试一次，它失败了。也许这是打字稿编译器的问题。

我认为这是依赖问题，有人更新并崩溃了一切

执行命令时收到错误的捆绑文件：

不包含文件npm:@angular/animations@4.1.3.json，不包含 .json 文件，仅包含 .js 文件，但是，如果我从 OSX 启动相同的命令，则包含这些字段

来自 OSX（有效的捆绑文件内容）：

从 Linux （错误的包文件，缺少 json 包定义）：

两者都使用相同版本的 jspm ( 0.17.0-beta.41)、systemjs ( 0.20.10) 和 systemjs-builder ( 0.16.4)，我想这两个环境中存在一些不同的影响，但我已经删除了~/.jspm具有相同结果的干净 env 的目录，我不确定还有什么影响。

jspm.config.js 文件在两种情况下都是相同的：

如果我理解正确，丢失的 json 文件被处理但不包括在内，文件“npm:@angular/http@4.1.3/bundles/http.umd.js”被包括在内，因为在“npm:@angular/http @4.1.3.json”，但是，由于某种原因，包定义文件在包中被跳过。

¿ 是否有任何其他文件我应该在这两种环境中检查？欢迎任何想法。

更新：经过一些测试，我怀疑问题与systemjs-builder lib有关，而不是jspm

I am trying to get my angular application to the point where it is ready for distribution and I have managed to create 2 bundles, one for my angular application and one for my dependencies (which include the angular framework and the rxjs framework). I am using systemjs builder to do the bundling and using gulp to run the builder. Both bundles are produced and my custom bundle (which contains my code) is loaded by the front end but the vendor/dependency bundle is ignored and the dependencies are still loaded from the node_modules folder.

I'm thinking that it is an issue with my dist-system-config.js file that I use in the final distribution.

My solution is based mostly on this previous answer with a couple of exceptions like not including/inlining my html templates and adding node_modules to the exclusion path of the dependencies.

I will include everything I believe is relevant to the problem, if more is needed please let me know.

Just to reiterate, the application loads and runs OK but instead of loading the dependencies from dependencies.bundle.js they are loaded from the original location(s) in the node_modules folder. The app.bundle.js is loaded without any issues.

Index.html

app/boot.ts

Scripts/dist-system-config.js

gulpfile.js

package.json (Relevant versions only)

我们正在编写一个 Angular 2 应用程序，该应用程序几乎利用了系统中某处的所有各种组件。在开发中，页面加载时间非常慢，因为 devexpress 从单独的 js 文件加载每个模块，并且不提供用于开发的缩小版本。

运行 npm install 后有什么办法可以缩小 devexpress 包。在 Angular 应用程序中，我们使用 systemjs，因此它需要与之兼容。

我是这种事情的新手，所以任何例子都会很有帮助。

我们正在使用 systemjs 将我们庞大的 angularjs 应用程序升级为混合 Angular 应用程序（angularjs + angular5）。我们已经开始在 Angular 5 中实现新功能。我正在使用 systemjs-builder 创建我的 main.ts 的捆绑文件，并使用 index.html 中的脚本标记包含此文件。

现在，问题是 systemjs-builder 正在将 main.ts 的全部内容及其所有依赖项打包到一个文件中（包括 app.module.ts、路由、服务、组件），所有从 main.ts 引用的内容。

缩小后我的文件大小为 1.2MB，非常大。我现在的表现很好。但是，将来随着我们不断添加更多组件或服务，捆绑文件的文件大小会增加，这可能会导致客户端速度变慢。我该如何摆脱这个问题。

system_prod.config 文件

})

gruntfile.js 中的代码——生成捆绑文件

我在 index.html 中使用 script 标签包含了 system-generated.min.js 文件。

任何帮助是极大的赞赏。我真的很担心在不久的将来随着应用程序的增长，捆绑的文件大小也会增长，对吗？这可能会导致客户端在下载巨大的捆绑文件时速度变慢。

注意：对于混合 Angular 应用程序，我们没有找到使用 angular-cli 或 webpack 的好文档。大多数情况下，他们谈到只使用 systemjs。这就是我们使用 systemjs 开始升级过程的原因。

我没有在我的项目中使用 cli。它使用系统 js 构建器来捆绑东西并使用 node lite 服务来提供内容。我正在尝试弄清楚是否有一种方法可以像常规 cli 项目一样在我的项目中使用环境变量。

喜欢

这是我的构建步骤：

运行

其中包含 systemjs 构建步骤。

将项目更改为 cli 有点困难。非常感谢任何帮助。

我有 Angular 5 应用程序。我想尽可能地缩小和捆绑我的应用程序。

这是 SystemJS 的配置：

gulpfile.js：

index.html 包含以下内容：

结果，我在“dist”文件夹中编译了应用程序（其中包含 html 的 js 文件）。而且我还有“生产”文件夹，其中“ app.bundle.min.js”存放了我所有的应用程序文件，“ dependencies.bundle.min.js”存放了我所有的依赖项，如 angular、kendo、rxjs 框架。当我启动我的应用程序时，它会分别加载这 2 个缩小文件和所有依赖项，例如：

但它们都在“ dependencies.bundle.min.js”中。

我该如何解决？

我正在使用在 typescript 和 SystemJS 模块构建器中编写的 AngularJS。我的应用程序的主文件 (app.ts) 位于 Scripts/App 中。

来自 gulpfile.js 的 SytemJS 生产配置：

运行 gulp default 后，我​​收到“Uncaught SyntaxError: Unexpected token <”错误。谁能告诉我我做错了什么？

我正在尝试在 Angular 5 中为我的应用程序文件创建一个包。我有以下 gulp 任务。“app-compile”似乎运行良好，但“app-bundle”运行但不创建任何文件夹或文件。我在这里缺少什么？