将 typescript 转换为纯文本 Javascript

Question

我脑子里有些模糊，就是下面的内容。我有一个用打字稿编写的模块，稍后将在 html 页中导入。

sdk.ts

export class PM {

  header: any;
  headerLink: string;
  headerDiv: any;

  /**
   * @todo remove constructor.
   */
  constructor(mode: string) {
    if (mode == null || mode == undefined) {
      this.buildGUI();
    }
  }

  /**
   * Build GUI.
   * It builds the GUI by wrapping the body in a container, adding the header and sidebar.
   */
  buildGUI(): void {
    this.initAndCreateComponents();
    this.insertScript(this.headerLink);
  }

  /**
   * Insert script.
   * It inserts the script's import tag in the head of the document.
   * @param {string} scriptLink - script's link to be loaded.
   */
  insertScript(scriptLink: string): void {
    const script = document.createElement('script');
    script.src = scriptLink;
    document.body.appendChild(script);
  };

  /**
   * Init and Create Components.
   * It initialises the variables values and it creates the components.
   */
  initAndCreateComponents(): void {
    this.headerLink = '/header/pm-header.js';

    this.header = document.createElement("pm-header");
    this.headerDiv = document.createElement("div");
    this.headerDiv.classList.add('pm-header-wrapper');
    this.headerDiv.appendChild(this.header);

    document.body.insertBefore(this.headerDiv, document.body.firstChild);
  }    
}

new PM(null);

这是我的 tsconfig.json

{
  "compileOnSave": false,
  "include": [
    "src",
    "test"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
  "compilerOptions": {
    "sourceMap": false,
    "outDir": "./dist",
    "declaration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "@types/jasmine",
      "@types/node"
    ],
    "lib": [
      "es2017",
      "dom",
      "es2015.generator",
      "es2015.iterable",
      "es2015.promise",
      "es2015.symbol",
      "es2015.symbol.wellknown",
      "esnext.asynciterable"
    ]
  }
}

现在当我运行 tsc 我得到 sdk.js 看起来像这样：

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var PM = /** @class */ (function () {
        /**
         * @todo remove constructor.
         */
        function PM(mode) {
            if (mode == null || mode == undefined) {
                this.buildGUI();
            }
        }
        /**
         * Build GUI.
         * It builds the GUI by wrapping the body in a container, adding the header and sidebar.
         */
        PM.prototype.buildGUI = function () {
            this.initAndCreateComponents();
            this.insertScript(this.headerLink);
        };
...

现在这个生成的文件应该在几个 html 页面中导入，当我做我的研究时，我发现它只能使用这样的 require 来加载：

<script data-main="/sdk/sdk.js" src="/sdk/require.js"></script>

我想要的是一种无需使用任何库即可加载我的脚本的方法，可以像任何普通 javascript 文件一样加载。

Answer 1

如果您不想使用模块系统（尽管我强烈建议您考虑使用一个），您应该从 class（以及您的任何其他符号）中删除 export file) ，这将使您的模块被视为一个简单的脚本文件。

您还应该将 "module": "none" 添加到 tsconfig.json 中，让编译器知道您将不会使用模块系统。这应该会在您的代码依赖于模块的任何地方触发错误（因为您 export 某些东西或您使用 import）

注意因为你不会使用模块系统，所以你在脚本文件中声明的任何 class/variable/function 都将在全局范围内（因为它们适用于任何js 文件）。您可能需要考虑使用命名空间来组织您的代码并脱离全局范围。

将 typescript 转换为纯文本 Javascript

Transpile typescript into plain Javascript

javascript

requirejs

typescript