Typescript: выполнить IIFE из модуля UMD, который импортирует отдельный модуль - PullRequest
Новая
       11

Typescript: выполнить IIFE из модуля UMD, который импортирует отдельный модуль

0 голосов
/ 15 февраля 2019

У меня есть tsconfig.json, подобный этому: 

{
  "compilerOptions": {
    "lib": ["es2017", "dom"],
    "module": "umd",
    "outDir": "dist",
    "target": "es5",
    "declaration": true
  },
  "compileOnSave": true,
  "files": [
    "myClass.ts"
    "demo.ts"
  ]
}

Моя машинопись, demo.ts: 

import { MyClass } from './myClass';

(() => {
  console.log('fired IIFE');
  document.onreadystatechange = function () {
    if (document.readyState === 'interactive') {
      console.log('hello world', MyClass);
    }
  };
})();

, которая компилируется в: 

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./myClass"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var myClass_1 = require("./myClass");
    (function () {
        console.log('fired IIFE');
        document.onreadystatechange = function () {
            if (document.readyState === 'interactive') {
                console.log('hello world', myClass_1.MyClass);
            }
        };
    })();
});

Мой HTML: 

<!DOCTYPE HTML>
<html>
<head>
  <title>Test</title>
  <script src="./dist/myClass.js"></script>
  <script src="./dist/demo.js"></script>
</head>
<body>
  <p>test</p>
</body>
</html>

Я также пытался: 

<!DOCTYPE HTML>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <p>test</p>
  <script src="./dist/myClass.js"></script>
  <script src="./dist/demo.js"></script>
</body>
</html>

Ни один из способов не выполняет сценарий, и ни один лог-оператор не печатается.Что я делаю не так?

1 Ответ

0 голосов
/ 16 февраля 2019

Оказывается, вам нужно использовать requirejs для выполнения сгенерированного машинописью модуля UMD: 

<!DOCTYPE HTML>
<html>
<head>
  <title>Test</title>
  <script data-main="dist/demo" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>
</head>
<body>
  <p>test</p>
</body>
</html>

Здесь происходит то, что data-main указывает на файл .js, который загружает все остальное.Вам не нужно загружать скрипт класса отдельно, для вас это требуется с помощью require.js.

Это отбросило меня, потому что с пакетом gulp-wrap-umd предоставляемая оболочка не создаст изолированную область для вложенного скрипта, он был по сути глобальным, тогда как генерируемые машинописным сценарием UMD-сценарии имеют отдельные области видимости.

В этой реализации мой сценарий начальной загрузки demo.js выглядит следующим образом: 

(function (factory) {
  if (typeof module === "object" && typeof module.exports === "object") {
      var v = factory(require, exports);
      if (v !== undefined) module.exports = v;
  }
  else if (typeof define === "function" && define.amd) {
      define(["require", "exports", "./myClass"], factory);
  }
})(function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  require(["./dist/myClass"], (myClassModule) => {

    console.log('my class:', myClassModule.MyClass);
  });

Где находится оператор log,Вы можете запустить любой скрипт без необходимости document.onready... или window.onload.

...