带有Angular2和浏览的单独供应商和应用bundle - 导入错误

Question

我正在使用我想使用Gulp和browserify构建的Angular2应用程序。
使用tsify我设法输出了一个独立的bundle.js，在缩小后的光荣尺寸为14m。

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

基本上我希望实现这一目标：

  <!-- 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
   

我的供应商文件只是导入的列表：

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'

2. 然后我创建了第二个捆绑包：

   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. 您尚未将-r选项用于您希望从bundle_vendors.js所需的模块。
2. tsify中有一个破坏浏览的-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的文件）的类型检查。当程序包含大型声明文件时，编译器会花费大量时间类型检查已经知道的不包含错误的声明，并且通过跳过声明文件类型检查可以大大缩短编译时间。

。