typescript - 如何配置 tsconfig.json 以便为 Chrome 扩展创建模块

我正在为一个 Chrome 插件在 VS Code 中编写一些 TypeScript。TS 转译成 JS 工作正常，但我的主要 .ts 文件足够大，我想将一些代码重构到一个单独的模块中。

我创建了一个文件 - common.ts - 并把我一些常量和函数移过去了：

export function doSomething(foo : string): string { ... }

在我的主 .ts 文件中，我可以通过限定它们来引用这些导出，例如：

let result = common.doSomething("foo");

目前，我能够通过以下方式导入此代码：

import common = require("./common");

VS Code 在自动完成或构建方面没有问题；然而，当我打开我的扩展时，会出现错误：

未捕获的 ReferenceError：在 popup.ts:2 定义的 define 未定义

这指向生成的 JavaScript 的这一部分：

define(["require", "exports", "./common"], function (require, exports, common) {

我当前的 tsconfig.json 是：

{
    "compilerOptions": {
        "target": "es6",
        "module": "amd",
        "sourceMap": true
    }
}

我尝试过使用“commonjs”模块，但我读过浏览器不支持它。即便如此，当我尝试使用时，我仍然遇到类似的错误，说“exports”未定义：

Object.defineProperty(exports, "__esModule", { value: true });

我也尝试过使用“system”模块，但同样的情况发生了，显示“System”未定义：

System.register(["./common"], function (exports_1, context_1) {

最后使用“es2015”，这要求我改为导入 import * as common from "./common";。这行代码在 .js 文件中被完整复制，Chrome 给我报了错误：

未捕获的语法错误：意外的标记 *

我还将目标从 es6 改为了各种其他目标，并且我尝试过改为使用 import { doSomething } from "./common" 导入。

配置 tsconfig.json 的适当方式是什么，以便编写模块（注意：我在 common.ts 中没有使用 module 或 namespace 关键字：它只是一些 export 语句），以及如何导入该模块，以便我可以整理这段代码并在浏览器中使用？

答案＃1

根据一些快速的研究（我自己从未开发过 Chrome 扩展程序），你需要要么：

1. 使用诸如 Webpack 这样的打包工具，它可以将 TypeScript 支持的 “module” 输出格式之一转换为单个 JavaScript 文件，或者

2. 设置 "module": "es2015"，并按照此处或此处所述使用 HTML 页面将你的模块加载到 Chrome 中。