Question

我正在为一些简单的组件编写一个小型库，以学习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);

由于未实例化Container，因此以下代码不起作用：

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

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

但这将在构建中包括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中包含所有文件？

更新

将以下行添加到我的index.ts中会将文件添加到构建中。

import './gui/container';

我也发现它可能与tripple-slash directives有关，但我还不知道。

Answer 1

Webpack通过递归地从文件中标识 import或require 关键字来创建依赖关系图。如果任何文件未导入到项目的任何位置，则webpack找不到它。通过删除构建中未使用的文件

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

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

https://medium.com/front-end-hacking/webpack-and-dynamic-imports-doing-it-right-72549ff49234

有关依赖图的更多信息

https://webpack.js.org/concepts/dependency-graph/

除非实例化类，否则它们不在构建中

1 个答案: