在浏览器中使用Typescript

时间：2016-04-12 18:43:34

标签： typescript gulp ecmascript-6 webpack browserify

我最近一直在努力解决这个问题。我正在创建一个新的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，但我不确定从哪里开始，或者如何适应工作流程。

数据库类

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,

3 个答案:

答案 0 :(得分：0)

以下是一些可以帮助您入门的资源：

  1. Webpack：link
  2. Gulp + webpack：link
  3. Browserify：link
  4. Systemjs：link，link
  5. requirejs：link
  6. 示例gulp任务：link
  7. 在index.html中示例基本systemjs配置：link

    8. 没有最好的方法＆＃39;这取决于您的应用程序的具体情况。如果您需要/可以将所有应用程序捆绑为单个js文件 - webpack或browserify。否则 - systemjs，也许requirejs。我个人的偏好是gulp + systemjs。但是，如链接1-5所示，可以使用任何加载器完成。

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

    希望这会帮助您入门。

答案 1 :(得分：0)

我已经弄清楚了我的问题。我直接在＆＃34; index.html＆＃34;中引用了这些文件。页面，这是不必要的。需要做的是更改引用，以便节点控制器知道文件的位置，而不是索引页。在此之后，在编译时，导出和require工作正常。

答案 2 :(得分：0)

现在，只有tsc命令行工具才能为您提供在浏览器上使用打字稿的所有功能。

首先，在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，您可以看到会发生什么。

相关问题
最新问题