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

【问题标题】：Building a Typescript project to UMD but getting multiple files将 Typescript 项目构建到 UMD 但获取多个文件
【发布时间】：2021-07-31 09:23:03
【问题描述】：

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

我错过了什么？

【问题讨论】：

标签： javascript typescript umd

【解决方案1】：

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

【讨论】：