用于库文件的 Webpack/Typescript，如何进行 treeshake 导入，而不是 treeshake 导出？

Question

我对这一切有点陌生，所以我可能使用 webpack 错误。

我们的要求：我有一个文件，其中包含需要在 typescript/javascript 文件中引用的对象。 该文件很大，这就是为什么我想将其缩小为仅使用的特定属性的原因。 该文件看起来像这样：

    export const Fieldnames = {
        testObject: {
            "testfield1":"testfield1",
            "testfield2":"testfield2",
            "testfield3":"testfield3",
            "testfield4":"testfield4",
            "testfield5":"testfield5",
            "testfield6":"testfield6",
        },
    }

然后我想创建几个库文件，公开（导出？）javascript 函数，以便我可以将这些文件上传到网站，并且网站可以独立调用这些函数。 这有点重要：VisualStudioCode/Webpack 不了解我需要这些功能，并且暴露出来，并且只是将那些没有立即调用的功能摇掉。 我的 TS 文件如下所示：

这是 TS 源文件：

    import {Fieldnames} from "../Earlybound/FieldnamesTest";

    export function testFunctionNeverCalled() {
      console.log(`never called survived. ${Fieldnames.testObject.testfield1}`);
    }

    export function testFunctionCalled () {
      console.log(`Called survived. ${Fieldnames.testObject.testfield3}`);
    }

    testFunctionCalled();

结果如下：

( () => {
"use strict";
console.log("Called survived. testfield3")
})();

这里的问题是“testFunctionNeverCalled”已经消失了。 testobject 和 testfields 已经完全按照我想要的方式集成。

我的 webpack.config.js 看起来像这样：

const path = require('path');

module.exports = {
    entry: {
        inputfile1: './src/inputfile1.ts',
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname,'src')]
            },
        ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname,"../JavascriptOutput/")
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    optimization: {
    mangleExports: true,
    usedExports:true,
    }

}

我不应该在这里使用 webpack 吗？ 有替代方案吗？ 我很感激任何意见。 谢谢！

Answer 1

我终于发现的一种可能性是将所有内容输出到这样的库中：

module.exports = {
    entry: {
        wscrm_vehicle: './src/wscrm_vehicle.ts',
        wscrm_vehicle2: './src/wscrm_vehicle2.ts',
        lead: './src/lead.ts'
    },
    output: {
        path: path.resolve(__dirname,"../JavascriptOutput/"),
        filename: '[name].js',
        libraryTarget: 'var',
        library: 'functions'
    },

这给了我以下 output，即

var functions;
(() => {
    "use strict";
    var e = {
            d: (t, o) => {
                for (var n in o) e.o(o, n) && !e.o(t, n) && Object.defineProperty(t, n, {
                    enumerable: !0,
                    get: o[n]
                })
            },
            o: (e, t) => Object.prototype.hasOwnProperty.call(e, t),
            r: e => {
                "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                    value: "Module"
                }), Object.defineProperty(e, "__esModule", {
                    value: !0
                })
            }
        },
        t = {};
    e.r(t), e.d(t, {
        testFunctionCalled: () => r,
        testFunctionNeverCalled: () => l
    });
    const o = "testfield1",
        n = "testfield3";

    function l() {
        console.log("never called survived. " + o)
    }

    function r() {
        console.log("Called survived. " + n)
    }
    r(), functions = t
})();

效果出奇的好！