使用 angular2 和 browserify 分离供应商和应用程序包 - 导入错误

Question

我正在开发一个我想使用 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'。

关于问题：

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

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

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

任何帮助表示赞赏！

Answer 1

有两个问题：

1. 对于您希望从bundle_vendors.js 获取的模块，您尚未使用-r option。
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 compiler option 添加到您的tsconfig.json：

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