使用单独编译的单个TypeScript文件构建Angular 2项目

Question

我目前正在Angular 2中创建Chrome扩展。该应用程序有一个background.js文件，其中包含与将运行的长时间运行的进程相关的功能扩展程序运行时的背景。此文件（background.js）目前与Angular 2项目完全分离，并且在构建时作为资产进行处理（并复制）。此设置工作，但我真的想在我的背景文件中使用TypeScript。

在这个打字稿文件其实我是想访问某些文件从我的角度2项目作为这样的：

///<reference path="app/app.settings.ts"/> 

我只需要设置（常量）和业务对象（类），没有什么更复杂。

要实际使用此项目作为扩展，我需要构建Angular 2项目并将背景TypeScript文件编译为位于同一位置的单独JavaScript文件。

我的尝试：

1. 配置的角度构建单独编制的背景文件

我与我的角cli.json发挥各地文件来实现与单个理想的效果“ng build”命令。我试过包括和文件选项，没有运气。

使用构建的角度的应用程序和编译的.ts文件相同的目录

这一个实际上有希望的脚本。我有以下脚本，需要一个参数（输出路径）：

#!/bin/bash 
ng build --output-path=$1 
tsc --outDir $1 src/background.ts 

脚本作品，角项目建成后，background.ts文件与参考依赖一起编译，这些都是可用所需的位置。但是生成的JavaScript不工作，我得到以下错误，例如：

Uncaught ReferenceError: exports is not defined 
Uncaught SyntaxError: Unexpected token import 

正如我现在明白了，我将不得不使用的WebPack真正使这项工作，但我没有找到一个方法要从命令行执行此操作，与我的Angular项目分开执行。

Answer 1

所以，我设法解决这个问题，我会在这里留下答案，也许它会帮助别人。

我的解决方案是使用browserify来生成一个在浏览器中工作的.js。首先它需要全球的装机量：

npm install -g browserify 

张贴在讨论的脚本必须进行修改，以这样的事：

#!/bin/bash 
ng build --output-path=$1 
tsc --outDir $1 src/background.ts 
browserify $1\\background.js -o $1\\background-browserified.js 

这样运行一个命令建立我的角2的项目和编译并将单独的Typescript文件复制到相同的位置。

我确定像Webpack这样的其他模块捆绑软件也可以使用，但对于这样的简单案例，浏览器是我能找到的最合适的。