TypeScript -> 浏览器的 JavaScript：exports/require 语句答案

【问题标题】：TypeScript -> JavaScript for browser: exports/require statementsTypeScript -> 浏览器的 JavaScript：exports/require 语句
【发布时间】：2019-03-27 10:58:35
【问题描述】：

我想为我们的网络应用程序的脚本从 JavaScript 切换到 TypeScript。但是，在生成 JavaScript 时，它总是会在脚本顶部添加以下几行：

"use strict";
exports.__esModule = true;
var $ = require("jquery");

我收到了浏览器错误。如何防止 TypeScript 这样做？

我阅读了TypeScript: Avoid require statements in compiled JavaScript，但它不能成为切换到“任何”的答案，这丧失了整个 TypeScript 的想法。

我也读过Typescript importing exported class emits require(...) which produces browser errors，但这仍然会在JS文件中生成<reference...的东西，这也不是我想要的。

如何创建“干净”的 JS 文件？

我的 tsconfig.json 看起来像这样：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5"
  },
  "compileOnSave": true
}

我的 gulp 调用是：

var ts = require('gulp-typescript');
...
var tsProject = ts.createProject("tsconfig.json");
...
gulp.task("ts", function () {
  return gulp.src(tsInputFiles)
    .pipe(tsProject())
    .js
    .pipe(gulp.dest("wwwroot/js"));
});

【问题讨论】：

显示你的tsconfig.json文件，你在用webpack吗？
我添加了tsconfig.json。不，我正在使用 gulp 管道。
我认为，您可以尝试将 babel 添加到您的 gulp 管道中。
我在.js 和gulp.dest 之前将 babel 添加到我的管道中，但它没有帮助。 babel 究竟应该做什么？
“我收到浏览器错误。”你能告诉我们这些是什么吗？

标签： javascript typescript

【解决方案1】：

如果您不想加载任何模块，只需将模块加载放在 typescript 文件的开头即可？

file1.ts:

$(function () {
});

如果你尝试编译这个，你会得到一个错误：

file1.ts(2,1): error TS2581: Cannot find name '$'. Do you need to
install type definitions for jQuery? Try `npm i @types/jquery` and
then add `jquery` to the types field in your tsconfig.

按照上面所说的运行 npm（首先是npm init，如果 npm 尚未在目录中初始化）。

然后将typeRoots和types添加到tsconfig：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [ "node_modules/types" ],
    "types": [ "jquery" ]
  },
  "compileOnSave": true
 }

在那之后，编译工作，你仍然有适当的强类型（jquery类型在编译中应用）。

【讨论】：

这似乎可行，但是，如何从给定的类型模式扩展接口？编译器总是失败并显示“全局范围的增强只能直接嵌套在外部模块或环境模块声明中。”

【解决方案2】：

浏览器不支持 JavaScript 模块，因此您需要告诉 TypeScript 编译器您正在尝试编译将在浏览器上运行的代码。我不知道您项目的其余部分是什么样的，但在您的配置中，尝试将"module": "es2015" 或"module": "system" 添加到您的配置中，同时添加一个outFile 定义您想要生成文件的位置：

在您的 tsconfig 文件中：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "outFile": "script.js",
  },
  "compileOnSave": true
}

【讨论】：

这将在 JS 文件中生成 import 语句。
很遗憾，es2015 和系统都没有帮助。
确实，如果您不使用任何捆绑程序并且不想要多个文件，那么我想您应该使用 outFile 选项，它将输出“连接”（简而言之）单个文件, 解决模块导入后。我编辑了我的答案以反映这一点。
连接仍然会创建有问题的行:(

【解决方案3】：

我想使用TypeScript 文件通过gulp 任务直接注入到 HTML 文件中（编译成 es5）。起初将type="module" 添加到<script> 有帮助。但是后来出现了更多问题，所以最后我最终使用了这个符号而不是import：

/// <reference types="@types/jquery" />
/// <reference path="my_custom_file.ts" />
/// <reference path="my_externalTypes.d.ts" />

和namespace 在每个文件中将它们彼此分开。

这应该适用于简单的小型项目。

【讨论】：