Question

由于与typescript，babel和webpack的兼容性问题，我必须使用export class Test {}语法而不是export default class Test {}。它解决了我使用typescript的所有问题，但却导致webpack命名对象上的所有内容。

我正在使用webpack生成umd并正在通过requirejs测试include。

然而，我现在不是直接传递函数，而是使用属性来获取对象。这不会在我的真实应用程序中飞行。

{
    Test: function Test() {}
}

webpack.config.js：

module.exports = {
    entry: './test.js',
    output: {
        filename: 'a.js',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [{
            test: /\.js$/, loader: 'babel-loader'
        }]
    }
};

.babelrc：

{
    "presets": ["es2015"]
}

Answer 1

我不确定我是否理解正确，但经过多次实验后，我发现在TypeScript中使用模块的最简洁方法是在源文件中使用ES6语法。

// src/foo/Foo.ts
export class Foo {}

// src/bar/Bar.ts
import {Foo} from '../foo/Foo';
export class Bar extends Foo {}

这样您的源文件就可以保持与输出模块格式无关。

对于大型库，可以将index.ts保留在每个＆＃34;名称空间＆＃34;的根部，这将在导出模块时为您提供更大的灵活性：

// src/widgets/FooWidget.ts
export class FooWidget {}

// src/widgets/BarWidget.ts
export class BarWidget {}

// src/widgets/index.ts
export * from './FooWidget';
export * from './BarWidget';

// src/index.ts
import * as widgets from './widgets';
import * as badgers from './badgers';
export {
  widgets,
  badgers
};

Webpack命名空间es6模块

1 个答案: