使用 Typescript 输出纯 JS，而不是模块？

Question

例如 ...

索引.ts

import { x } from "./other-funcs";

function y() {
    alert("test");
}

x(y);

其他功能.ts

import { z } from "some-module";

export function x(callback: () => void): void {
    z();
    callback();
}

（请注意，“other-funcs.ts”使用 import 语句从其他模块导入函数。）

我想编译index.ts并生成一个 JS 文件，该文件可以直接包含在 HTML 文件中，例如<script src="index.js"></script>，并让它立即在浏览器中执行（显示警报）。

样本输出

function x(callback) {
    callback();
}

function y() {
    alert("test");
}

x(y);

我似乎无法获得正确的 TS 配置来获得此结果。请指教。

注意：这与这个问题不同，因为我需要使用import等。我只希望结果是没有模块加载器的简单 JS 输出。

Answer 1

普通 JavaScript

每当你使用它时，import它总是会构建成一个模块。namespaces但是，您可以与 一起使用"module": "system"，然后可以将其输出到单个文件（或多个文件）。

因此，对于一个非常基本的项目，您将拥有以下内容：

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "system",
    "outFile": "./lib.js"
  },
  "include": [
    "./**/*.ts"
  ]
}

接下来，您将创建如下所示的文件：

索引.ts

namespace MyNamespace {
  // This is a private method that cannot be accessed in other files
  // the reason for that is because it isn't exported.
  function y() {
    alert("test");
  }

  x(y)
}

函数.ts

namespace MyNamespace {
  // This method can be referenced in other files because it is exported.
  export function x(callback: () => void): void {
    callback();
  }
}

生成的浏览器代码

{
  "compilerOptions": {
    "target": "es2016",
    "module": "system",
    "outFile": "./lib.js"
  },
  "include": [
    "./**/*.ts"
  ]
}

然后，您可以通过名称空间调用它们来在名称空间之外使用这些方法/函数：

MyNamespace.y()
MyNamespace.x(MyNamespace.y)
// etc.

使用requirejs

要import在您的项目中使用，您将需要一个第三方库requirejs。这将允许您在浏览器中使用模块。

因此，要做到这一点，我们首先需要有正确的配置文件，它看起来与上面类似，唯一的区别是"module": "amd".

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "amd",
    "outFile": "./lib.js"
  },
  "include": [
    "./**/*.ts"
  ]
}

接下来我们需要创建正确的打字稿主文件：

索引.ts

requirejs(['functions'], function (util: any) {
  function y() {
    alert("test");
  }

  util.x(y)
})

由于这是使用第三方库，因此它的初始化方式不同（使用requirejs()）。这告诉 requirejs 这是应用程序的入口点，因此只需要一次。

函数.ts

export function x(callback: () => void): void {
  callback();
}

生成的浏览器代码

namespace MyNamespace {
  // This is a private method that cannot be accessed in other files
  // the reason for that is because it isn't exported.
  function y() {
    alert("test");
  }

  x(y)
}

namespace MyNamespace {
  // This method can be referenced in other files because it is exported.
  export function x(callback: () => void): void {
    callback();
  }
}

如果你的脚本在外部文件中，你可以data-main在 script 标签上使用，然后 requirejs 会自动加载该文件。

<script data-main="./lib" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

实验模块

此功能仍处于实验阶段，并非所有浏览器都支持。您需要做的就是使用type="module"脚本标记上的属性：

<script type="module" src="./path/to/main.js"></script>

tsconfig.json

注意：这里我们使用不同的targetand module，也使用outDir.
注意： es2016不是有效的模块类型。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "es2015",
    "outDir": "./lib"
  },
  "include": [
    "./**/*.ts"
  ]
}

索引.ts

注意： import使用.js扩展程序，否则浏览器无法加载它，除非您有重写规则。

import { x } from './functions.js'
function y() {
  alert("test");
}

x(y)

函数.ts

export function x(callback: () => void): void {
  callback();
}

这将输出几乎与 ts 文件相同的结果（Stackoverflow 不支持外部 js 文件，除非它们托管在某个地方，所以这里没有代码片段）：

// index.js
import { x } from './functions.js';
function y() {
    alert("test");
}
x(y);

// functions.js
export function x(callback) {
    callback();
}