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

Question

例如……

index.ts

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

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

x(y);

other-funcs.ts

import { z } from "some-module";

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

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

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

示例输出

function x(callback) {
    callback();
}

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

x(y);

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

注意:这与 this question 不同因为我需要使用 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();
  }
}

生成的浏览器代码

var MyNamespace;
(function(MyNamespace) {
  function x(callback) {
    callback();
  }
  MyNamespace.x = x;
})(MyNamespace || (MyNamespace = {}));
var MyNamespace;
(function(MyNamespace) {
  function y() {
    alert("test");
  }
  MyNamespace.x(y);
})(MyNamespace || (MyNamespace = {}));

然后您可以在命名空间之外使用这些方法/函数，只需通过命名空间调用它们即可:

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

---

使用 requirejs

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

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

tsconfig.json

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

接下来我们需要创建正确的 typescript 主文件:

索引.ts

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

  util.x(y)
})

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

函数.ts

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

生成的浏览器代码

define("functions", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    function x(callback) {
        callback();
    }
    exports.x = x;
});
requirejs(['functions'], function (util) {
    function y() {
        alert("test");
    }
    util.x(y);
});

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

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

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

---

实验模块

This feature is still experimental, and not supported in all browsers .您需要做的就是在脚本标签上使用 type="module" 属性:

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

tsconfig.json

注意:这里我们同时使用了不同的target和module，以及outDir。< br/> 注意 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();
}