Связка классов Typescript с веб-пакетом - PullRequest
1 голос
/ 03 июля 2019

Я написал проект на Typescript и настроил его для связывания с веб-пакетом. Основная функциональность заключена в один класс Main, но он импортирует и другие классы. Необходимо экспортировать класс Main и все зависимые в одну библиотеку bundle.js для использования на других сайтах.

Я пытался объединить классы в отдельный проект (без веб-пакета просто tsc).

это tsconfig.json:

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES2015",
    "declaration": true,
    "outDir": "./dist",
    "outFile": "./dist/index.js",
  },
  "include": [
    "src/**/*"
  ]
}

но его нельзя использовать, так как ошибка:

ReferenceError: определить не определено
скомпилированный код содержит edfine
define ("Globals", ["require", "exports"], function (require, export) {

, а также с веб-пакетом, но не уверен, что он правильно настроен файл комплекта начинается с

(function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

другими словами, у меня есть несколько классов:

  • Main.ts
  • A.ts
  • B.ts
  • C.ts

и я ожидал получить файл bundle.js и использовать его так:

<script type="text/javascript" src="mylib/dist/index.js"></script>
//...
var a = new Main();

но застрял с пониманием того, как должны работать Typescript и Jsvascript вместе.

Буду признателен за любую помощь

Обновление: Удалось решить с помощью веб-пакета. Main доступен из записи app.ts при компиляции. Так внутри app.ts добавлен обработчик window.onload и назначен класс для window scope.

window.onload = function () {
    window['MyClass'] = Main;

Возможно, чего-то не хватает, но не удалось найти хорошую документацию по написанию библиотеки на TypeScript для браузеров.

Update2: Хорошо. нашел ответ. Опция webpack library отлично работает.

output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
    library: "MyMainClass"
},

также пришлось изменить параметр tsconfig.json target с es6 на es5

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { "*": ["types/*"] },
        "lib": [
            "dom",
            "es6",
            "dom.iterable",
            "scripthost"
        ],
        "module": "commonjs",
        "target": "es5"
    },
    "exclude": [
      "node_modules"
    ]
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...