Webpack名称空间ES6模块

Question

由于打字稿，babel和webpack的兼容性问题，我不得不使用export class Test {}语法，而不是export default class Test {} 。 它解决了我所有与打字稿有关的问题，但使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保留在每个“命名空间”的根目录下，这将在导出模块时为您提供更大的灵活性：

// 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
};