将 Typescript 项目构建到 UMD 但获取多个文件

Question

我想编译我的 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" && 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", "./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，但在这里它编译为多个文件。

我错过了什么？

Answer 1

TS编译器不是打包器，它只会独立编译每个文件。我建议使用 Webpack，因为它全面且易于使用，除非您想直接使用像 Angular 或 React 这样的框架，它们为您提供开箱即用的功能.其他选项可能包括 browserify、grunt、gulp、babel、parcel、...

将 Typescript 项目构建到 UMD 但获取多个文件

Building a Typescript project to UMD but getting multiple files

javascript

typescript

umd