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

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

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

注意：由于您将不会使用模块系统，因此您在脚本文件中声明的任何类/变量/函数都将位于全局范围内（就像对任何js文件一样）。您可能要考虑使用名称空间来组织代码并脱离全局范围。

将打字稿转换为纯Javascript

1 个答案: