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