Блог

Я хочу скомпилировать свой index.ts :

 import { initContainer } from "./embedTypes/container";
import { initPopup } from "./embedTypes/popup";
import { initBubble } from "./embedTypes/chat";

const Typebot = {
  initContainer,
  initPopup,
  initBubble,
};

export default Typebot;
 

в UMD index.js , чтобы я мог вызвать его с <script> помощью тега. Вот моя конфигурация ts:

 {
  "compilerOptions": {
    "outDir": "dist",
    "declaration": true,
    "module": "UMD",
    "target": "ES6",
    "moduleResolution": "node",
    "strict": true
  },
  "include": ["src/**/*.ts", "tests/**/*.ts"]
}
 

И вот что он компилирует ( index.js ):

 (function (factory) {
    if (typeof module === "object" amp;amp; typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" amp;amp; define.amd) {
        define(["require", "exports", "./embedTypes/container", "./embedTypes/popup", "./embedTypes/chat"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const container_1 = require("./embedTypes/container");
    const popup_1 = require("./embedTypes/popup");
    const chat_1 = require("./embedTypes/chat");
    const Typebot = {
        initContainer: container_1.initContainer,
        initPopup: popup_1.initPopup,
        initBubble: chat_1.initBubble,
    };
    exports.default = Typebot;
});
 

Похоже, это неправильно, он должен создавать уникальный index.js , но здесь он компилируется в несколько файлов.

Чего мне не хватает?

Компилятор TS не является сборщиком, он просто будет компилировать каждый файл независимо. Я бы рекомендовал использовать Webpack, поскольку он универсален и прост в использовании, если только вы не хотите сразу перейти к использованию фреймворка, такого как Angular или React, которые дают вам это из коробки. Другие варианты могут включать browserify, grunt, gulp, babel, посылку,…