Question

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

在这个TypeScript文件中，我实际上想要访问Angular 2项目中的一些文件：

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

我只需要设置（常量）和业务对象（类），而不是更复杂。

要将此项目实际用作扩展，我需要构建Angular 2项目并将后台TypeScript文件编译到同一位置的单独JavaScript文件中。

我尝试了什么：

配置角度构建以单独编译背景文件

我使用 angular-cli.json 文件来解决这个问题，以便通过单个＆＃34; ng build ＆＃34;来实现所需的结果。命令。我尝试了 include 和文件选项，没有运气。

使用构建角度应用程序的脚本并将.ts文件编译到同一目录

这个实际上很有希望。我有以下脚本，它采用一个参数（输出路径）：

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

脚本工作，Angular项目构建，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

这样运行单个命令可构建我的Angular 2项目，并将单独的Typescript文件编译并复制到同一位置。

我确信其他模块捆绑包如Webpack也可以使用，但对于像这样的简单情况 browserify 是我能找到的最佳选择。

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

1 个答案: