如何为库设置 TypeScript 编译器，以便 Webpack 在依赖项目中删除未使用的模块？

主题库初步说明

很抱歉占用您的时间让您阅读本文。我写它是为了回答诸如“你在做什么？”之类的问题。和“你为什么要这样做？”。

The library由大量辅助函数和类组成。在这方面它与 lodash 类似（检查lodash的结构），但与 lodash 不同的是，源代码的组织方式是多级目录。这对开发人员来说很舒服，但对用户来说可能不太舒服：要将所需的功能导入到项目中，用户必须知道它在哪里，例如。 G。：

import { 
  computeFirstItemNumberForSpecificPaginationPage
} from "@yamato-daiwa/es-extensions/Number/Pagination";

为了解决这个问题，大部分功能已导入到index.ts并从那里再次出口。现在用户可以获得所需的功能：

import { 
  computeFirstItemNumberForSpecificPaginationPage 
} from "@yamato-daiwa/es-extensions";

请注意，所有功能index.ts（将由 TypeScript 编译为index.js) 适用于 BrowserJS 和 NodeJS。特别适用于 BrowserJS 的功能位于BrowserJS.ts特别是对于 NodeJS 来说NodeJS.ts（目前几乎是空的，但再出口方法是相同的）。

另外，在这个问题得到解决之前，我将编译后的 JavaScript 包含到库存储库中（Distributable目录).

Problem

从现在开始，@yamato-daiwa/es-extensions 是library任何依赖它的项目都是消耗项目.

我预计消费项目的所有未使用的函数/类将被切断Webpack 优化。例如，在下面的情况下我期望isUndefinedWebpack 包中仅保留函数：

import { isUndefined } from "@yamato-daiwa/es-extensions"

const test: string | undefined = "ALPHA";
console.log(isUndefined(test));

但实际上，Webpack 留下了一切index.js图书馆的。我美化了 Webpack 构建的缩小版 JavaScript；它像是：

(() => {
    "use strict";
    var e = {
            5272: (e, t) => {
                Object.defineProperty(t, "__esModule", {
                    value: !0
                }), t.default = function(e, t) {
                    for (const [a, n] of e.entries())
                        if (t(n)) return a;
                    return null
                }
            },
            7684: (e, t) => {
                Object.defineProperty(t, "__esModule", {
                    value: !0
                }), t.default = function(e, t) {
                    const a = [];
                    return e.forEach(((e, n) => {
                        t(e) && a.push(n)
                    })), a
                }
            },
  // ...

我想每个人都明白这是不可接受的，特别是对于每千字节都很重要的浏览器应用程序。

如何解决这个问题呢？理想的解决方案（如果存在）不会触及源文件组织，只需更改 TypeScript 配置。

Repro

我创建又一个存储库（重现）您可以在其中尝试上面的示例。

实验流程

1. 通过 VCS 获取此存储库
2. 一如既往地安装依赖项（npm i命令）。
3. 检查src/index.ts。它进口isUndefined从库中获取函数并使用它。
4. Run npm run ProductionBuild
5. 美化输出index.js通过类似工具美容师io。您将看到整个库已被捆绑，而只需要inUndefined已被捆绑。

关于原因的思考

第一个候选原因是使用 reexportint 模式，确切地说来源/index.ts, 来源/BrowserJS.ts and 来源/NodeJS。编译出来的index.js好像：

const isStringifiedNonNegativeIntegerOfRegularNotation_1 = require("./Numbers/isStringifiedNonNegativeIntegerOfRegularNotation");
exports.isStringifiedNonNegativeIntegerOfRegularNotation = isStringifiedNonNegativeIntegerOfRegularNotation_1.default;
const separateEach3DigitsGroupWithComma_1 = require("./Numbers/separateEach3DigitsGroupWithComma");
exports.separateEach3DigitsGroupWithComma = separateEach3DigitsGroupWithComma_1.default;

(检查完整文件)

如果要从其单独的模块导入每个函数，例如import isUndefined from "@yamato-daiwa/es-extensions/TypeGuards/isUndefined"代替import { isUndefined } from "@yamato-daiwa/es-extensions"，不会输出多余的代码。但正如我已经说过的，这个解决方案是不可接受的，因为图书馆用户必须知道在哪里isUndefined并组织了其他功能。

另一个原因可能是输出模块类型。目前它是一个CommonJS。这里是tsconfig.json图书馆的：

{
  "compilerOptions": {

    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "Node",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,

    "removeComments": true,

    "outDir": "Distributable/",
    "declaration": true
  },

  "include": [ "Source/**/*" ]
}

根据假设，根据特定的模块类型，Webpack 可以将代码捆绑到整体结构中，即使这些模块尚未使用，也无法分解和过滤掉某些模块。

现在所有这些（AMD、UMD、CommonJS）慢慢成为历史的一部分， 但我们仍然可以在旧脚本中找到它们。