在浏览器中使用 Typescript

Using Typescript in the Browser

最近我一直在为这个问题苦苦挣扎。我正在创建一个新的 Typescript 项目，我正在尝试找出使用 Typescript 连接数据库并在浏览器中显示结果的最佳方法。但是，我在浏览器中收到如下控制台错误：

Uncaught ReferenceError: exports is not defined ("export class Database")

Uncaught ReferenceError: require is not defined ("import {Database} from "./Database";")

据我所知，我收到错误是因为文件正在被转译为浏览器无法理解的 CommonJS 模块。

我的问题是：这是对问题的正确诊断吗？如果是这样，解决此类问题的最佳方法是什么？

我研究的一种方法是使用 WebPack 或 Browserify，其他人建议使用 AMD/SystemJS 或 RequireJS。我很好奇这是否可以通过 Gulp 和 Webpack 完成，但我不确定从哪里开始，或者它如何适合工作流程。

数据库Class

export class Database{
    //...
}

Mongo Class

<reference path="../../../typings/browser/ambient/node/index.d.ts" />
<reference path="../../../typings/browser/ambient/mongodb/index.d.ts" />

    import {IDatabase} from "../interfaces/IDatabase";
    import {Database} from "./Database";
    import {MongoClient} from "mongodb";

    class MongoDB extends Database implements IDatabase{
        //...
    }

数据库接口

export interface IDatabase{
    //...
}

TSConfig 选项

"target": "es6",
"module": "commonjs",
"moduleResolution": "classic",
"sourceMap": true,

这里有一些帮助您入门的资源：

  1. 网页包：link
  2. Gulp+webpack: link
  3. 浏览器化：link
  4. Systemjs: link, link
  5. 要求：link
  6. 示例 gulp 任务：
  7. index.html 中的示例基本 systemjs 配置：

没有 'best way' 这取决于您的应用程序的具体情况。如果您 need/can 将所有应用程序捆绑为单个 js 文件 - webpack 或 browserify。否则 - systemjs，也许 requirejs。我个人的偏好是gulp+systemjs。但正如链接 1-5 所示，它可以用任何加载程序完成。

到目前为止，浏览器无法加载 javascript 模块，需要所谓的加载器（即 webpack、requirejs、systemjs、browserify）来完成这项工作。这就是您看到指定错误的原因。为了摆脱它们 - 选择一个加载器，配置它，错误就会消失。

希望这对您入门有所帮助。

我已经解决了我的问题。我在 "index.html" 页面中直接引用了这些文件，这不是必需的。需要做的是更改引用，以便节点控制器知道文件在哪里，而不是索引页。在此之后，在编译时，导出和要求工作正常。

现在只有 tsc 命令行工具可以为您做所有事情，让您在浏览器上使用 typescript。

首先，在tsconfig.json

中将模块配置为'AMD' 
{
  "compilerOptions": {
    "module": "amd",
    "outDir": "./", //Just by default
    "rootDir": "./" //Just by default
  }
}

其次，准备一个非常简单的索引html。它使用入口文件 index.js 来引导整个应用程序（通过 require.js）。

<html>
  <body>
    <div id="me">Nothing</div>

    <script data-main="./index.js" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
  </body>
</html>

然后，在 index.ts.

中写入任何内容 
//import something from somewhere

const el : HTMLElement | null = document.getElementById('me');
if(el){
  el.innerHTML = 'Hey I am typescript!';
}

您还可以像在常规打字稿中一样导入其他文件。

最后，运行tsc命令编译所有文件，然后打开index.html，看看会发生什么。