Typescript Visual Studio 2015 Update 3 哪个模块系统用于导入单独的 ts 文件答案

【问题标题】：Typescript Visual Studio 2015 Update 3 which module system for importing separate ts filesTypescript Visual Studio 2015 Update 3 哪个模块系统用于导入单独的 ts 文件
【发布时间】：2016-09-27 14:57:53
【问题描述】：

在 Visual Studio 中，我创建了一个 Typescript 项目，其中包含在默认 app.ts 文件中声明的多个类。现在我想开始将这些类分成单独的 .ts 文件。我很难理解该项目类型推荐使用哪种模块加载系统。

我选择了 ES6 以便我可以使用 asyc/await 的语法：

我添加了一个带有导出的测试类型声明的新 Test.ts 文件：

export class Test {

}

回到我的 app.ts 我正在创建这种类型的实例：

window.onload = async () => {
    let test = new Test();
}

Visual Studio 提供为其添加导入：

import {Test} from "Test";

现在，当我在 Chrome 中运行解决方案时，我收到以下控制台消息：

Uncaught SyntaxError: Unexpected token import

我意识到 chrome 不具备“导入”意识。有人可以提供一个关于我如何让导入在这个 VS 2015 环境中工作的建议。我是否需要采用另一个模块系统？如果需要，我如何添加对加载单独 .ts 文件的支持？

编辑：我见过使用这种语法的例子：

/// <reference path="Test.ts" />

但编译时解析类型不起作用，我认为这是一种已弃用的方法。

另外，当我查看 Chrome 中的源选项卡时，我可以看到我认为是从源代码转换为（ES5？）：

window.onload = () => __awaiter(this, void 0, void 0, function* () {

但我也看到了我没想到的“class”关键字，所以我不确定为什么会发生某些转换。即异步到 __awaiter（支持）、类（未转译和支持）、导入（未转换且不支持。）

编辑我关注了project

使用 webpack.config.js：

module.exports = {
  entry: './src/app.ts',
  output: {
      filename: './dist/bundle.js'
  },
  resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
      loaders: [
          // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
          { test: /\.tsx?$/, loader: 'ts-loader' }
      ]
  }
}

但我似乎有同样的问题，即 import 语句逐字复制并且没有在 ES5 输出中转换为浏览器理解的加载器：

import {Test} from "./Test";

【问题讨论】：

SO 响应太长，但 TL；DR：使用外部模块和 webpack。检查这个excellent resource
优秀 - 我什至没有意识到浏览器和非基于浏览器的 ts 有区别。
按照该链接中的说明设置项目，但我得到了相同的结果。

标签： typescript visual-studio-2015 es6-module-loader

【解决方案1】：

感谢布鲁诺让我走上了正确的道路。让我单独的 .ts 文件转换为单个 ES5 js 文件的原因是添加 babel-loader。

首先将其安装到 node_modules 中：

npm install babel-loader

然后将加载器引用添加到我的 tsconfig.js 文件中：

module.exports = {
  entry: './src/app.ts',
  output: {
      filename: './dist/bundle.js'
  },
  resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
      loaders: [
          // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
          { test: /\.tsx?$/, loader: 'ts-loader' },
          { test: /\.js$/, loader: "babel-loader"}
      ]
  }
}

现在，ts 文件中的 import 语句被转换为 babel-loader 语法

【讨论】：