用於庫文件的 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
})();

效果出奇的好！