Typescript 类不在生成中，除非它们被实例化

我正在为一些简单的组件编写一个小的库，以学习一些

TypeScript

，但是在没有显式实例化类时，构建库会出现问题

我希望能够使用字符串来实例化一个类。在定义一个类之后，我立即将类名和构造函数添加到一个对象中

/**
 * Component class store
 */
let classes: { [key: string]: IConstructable<IComponent> } = {};

export function addToDynamic(cls: IConstructable<IComponent>) {
    classes[cls.name] = cls;
}

/**
 * A component
 */
export class Container extends BaseComponent implements IComponent {
    items: object[];

    constructor() {
        super();
    }
}

addToDynamic(Container);

但是，这将在构建中包括

容器

：

import { Container } from './gui/container';
import { DynamicClass } from './gui/base';

let c1:Container = new Container();
let c2:Container = new DynamicClass('Container') as Container;
c2.add(document.body);

我的

webpack.config.js

：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'sugar-ant-lib',
        libraryTarget: 'umd'
    }
};

问题是如何在

src

中包含所有文件

更新

将下面的行添加到my

index.ts

会将文件添加到生成中

import './gui/container';

---

此外，我还发现可能与此有关，但我还不知道。

Webpack通过递归地从文件中识别导入或require关键字来创建依赖关系图。如果您的项目中有任何未导入的文件，webpack将找不到它。这将通过删除构建中未使用的文件而获得优势

一种解决方案是在任何文件上显式地添加import语句，因此webpack也会将其添加到依赖关系图中

另一个解决方案是动态导入，动态导入代码中最适合的文件，文件名将是动态的。因此，WebPack将根据名称创建一个模块

更多关于依赖关系图的信息

import './gui/container';