Webpack命名空间es6模块

Question

由于与typescript，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 
};