Прозрачный машинописный текст в простой Javascript - PullRequest
Новая
       8

Прозрачный машинописный текст в простой Javascript

0 голосов
/ 26 ноября 2018

Что-то немного мутно в моем уме, а именно:У меня есть модуль, написанный на машинописном тексте, который будет импортирован позже на некоторых 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.

1 Ответ

0 голосов
/ 26 ноября 2018

Если вы не хотите использовать модульную систему (хотя я настоятельно рекомендую вам использовать ее), вы должны удалить export из вашего класса (и из любого другого символа в вашем файле), это сделает ваш модульрассматривается как простой файл сценария.

Вы также должны добавить "module": "none" к вашему tsconfig.json, чтобы компилятор знал, что вы не будете использовать систему модулей.Это должно вызывать ошибки везде, где ваш код зависит от модулей (либо потому, что вы export что-то или вы используете import)

Примечание Поскольку вы не будете использовать систему модулей какого-либо класса/ variable / function, которую вы объявляете в файле скрипта, будет в глобальной области видимости (как и для любого файла js).Вы можете рассмотреть возможность использования пространств имен для организации своего кода и выхода из глобальной области.

...