1

我正在开发一个我想使用 gulp 和 browserify 构建的 angular2 应用程序。
使用tsify，我设法输出了一个独立bundle.js的，缩小后的大小为 1.4M。

我想要的是两个单独的捆绑文件：一个用于供应商依赖项，一个用于我的应用程序。

基本上我希望能做到这一点：

  <!-- My dream index.html script tags -->
  <script src="bundle_vendors.js"></script>
  <script src="bundle_app.js"></script>

这是我在命令行上尝试的：

  1. 我生成了第一个包：

    browserify app/vendor.ts -p [tsify ] > bundle_vendors.js

我的 vendor.ts 文件只是一个导入列表：

import 'zone.js'
import 'reflect-metadata'
import '@angular/core'
import '@angular/http'
import '@angular/router'
import '@angular/common'
import '@angular/platform-browser'
import '@angular/platform-browser-dynamic'
import 'rxjs/Rx'

  1. 然后我创建了我的第二个包：

    browserify -x @angular/core -x @angular/common -x @angular/http -x @angular/router -x rxjs/Rx -x @angular/platform-browser -x zone.js -x reflect-metadata -x @angular/platform-browser-dynamic app/main.ts -p [tsify ] > bundle_app.js

我的tsconfig.json文件看起来像这样（它位于当前目录中）：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es6", "dom"],  
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "compileOnSave": false,
  "exclude": [
  ]
}

好的部分：第二个包只包含我的应用程序，而且要小得多！
不太好的部分：它不起作用。我是我得到的浏览器Uncaught Error: Cannot find module '@angular/core'。

关于问题：

  • 我有什么明显的遗漏吗？
  • require加载后如何查看可用的模块bundle_vendors.js？我正在寻找“导出”的模块列表，以便其他包可以导入它们。

我不知道从哪里开始调试它。

从我读到的另一种选择是使用 angular-cli（它使用 webpack），但我从事的项目已经使用 gulp，所以我想让它工作。另外，我现在有点承诺。

任何帮助表示赞赏！

4

1 回答 1

1

有两个问题：

  1. 您尚未对-r希望从bundle_vendors.js.
  2. tsify 中有一个错误会破坏 Browserify 的-r选项。

我已经解决了第二个问题，并且新版本的 tsify (3.0.0) 已发布到 NPM。

要修复第一个问题，您应该将用于构建的命令更改bundle_vendors.js为：

browserify -r @angular/core -r @angular/common -r @angular/http -r @angular/router -r rxjs/Rx -r @angular/platform-browser -r zone.js -r reflect-metadata -r @angular/platform-browser-dynamic app/vendor.ts -p [tsify] > bundle_vendors.js

此外，您可能需要考虑将skipLibCheck编译器选项添加到您的tsconfig.json：

TypeScript 2.0 添加了一个新的--skipLibCheck编译器选项，该选项导致声明文件（扩展名为 的文件.d.ts）的类型检查被跳过。当程序包含大型声明文件时，编译器会花费大量时间对已知不包含错误的声明进行类型检查，并且通过跳过声明文件类型检查可以显着缩短编译时间。

于 2016-12-16T22:29:54.960 回答