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

Question

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

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

基本上我希望实现这个：

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

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

我生成了第一个包：

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'

然后我创建了第二个包：

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 可用的模块？我正在寻找 'exported' 的模块列表，以便其他包可以导入它们。

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

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

感谢任何帮助！

Answer 1

有两个问题：

您还没有使用 -r option 作为您希望从 bundle_vendors.js 获得的模块。
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 adds a new --skipLibCheck compiler option that causes type checking of declaration files (files with extension .d.ts) to be skipped. When a program includes large declaration files, the compiler spends a lot of time type checking declarations that are already known to not contain errors, and compile times may be significantly shortened by skipping declaration file type checks.

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

Separate vendor and app bundles with angular2 and browserify - Import error

browserify

typescript

gulp

tsify

angular