将多个 .ts 文件打包成单个 bundle.js 文件答案

【问题标题】：Pack multiple .ts files into single bundle.js file将多个 .ts 文件打包成单个 bundle.js 文件
【发布时间】：2020-11-23 12:28:08
【问题描述】：

我的代码是这样的：

Foo.ts：

export module Foo {

    export function load() { }
}

Bar.ts：

export module Bar {

    export function load() { }
}

webpack.config.js：

const path = require('path');

module.exports = {
    entry: {
        "FooBar": ['./Foo.ts', './Bar.ts']
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: ['[name]'],
        libraryTarget: "window"
    }
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

然而结果是，只有“Bar”在窗口对象上可见。

如果我切换 FooBar 入口点的两条路径，则只有“Foo”可见。如果我将 Foo 和 Bar 两个模块都放入 Bar.ts，同时将 ./Bar.ts 作为入口点的最后一个路径，那么这两个模块在窗口对象上都变得可见。这里发生了一些意外的覆盖或“最后一个获胜”的行为。如何在不将它们放入同一个 .ts 文件的情况下实现两个模块在窗口对象上可见？

我最初将 glob 包含在我的 webpack.config.js 中，以使其尽可能动态：

var glob = require('glob');
...
module.exports = {
    entry: {
        "FooBar": glob.sync('./*.ts*')
...

我希望将我所有的 .ts 文件捆绑到一个 .js 输出文件中，当然也包括我的所有模块。

【问题讨论】：

标签： node.js typescript webpack bundle

【解决方案1】：

您的观察几乎是正确的，解决方案中的条目数组按预期工作。正如他们的docs 中提到的，它用于“将多个依赖文件一起注入并将它们的依赖关系绘制成一个'块'”。他们只是没有很明显地表明实际上只导出了数组中的最后一项。见他们最后一句话here。

对于您使用 glob 工作的解决方案，您必须向 webpack 传递一个条目对象，其中每个文件都有一个属性或键值对。

【讨论】：

【解决方案2】：

感谢您指出，我真的体验到了预期的行为：D 根据您的反馈，我想出了这个：

FooBar.ts

import { Foo as _Foo}  from "./Foo";
import { Bar as _Bar} from "./Bar";

export namespace FooBar {
    export const Foo = _Foo;
    export const Bar = _Bar;
}

webpack.config.js：

const path = require('path');

module.exports = {
    entry: {
        "FooBar": './FooBar.ts'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: "window"
    }
};

我不是 100% 开心，因为现在我必须维护 FooBar.ts，但结果还是令人满意的：

【讨论】：