由Babel / webpack导出的Tyepscript / es6模块以_esModule的形式具有默认属性

Question

I've converted a javascript application into typescript, yet now that I've converted my code to typescript/es6-style exports, babel/webpack aren't exporting them correctly.

Since I now use the export default... syntax, babel turns it into an esModule object with the class actually attached to a default property.

Naturally, this object format is no longer valid for anyone actually using it.

I've tried adding the babel-plugin-add-module-exports plugin to the mix but it hasn't changed anything. I'm wondering if typescript being in the mix has caused an issue.

.babelrc:

{
    "plugins": [
        "add-module-exports",
        "lodash"
    ]
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs"
  }
}

webpack.config.js:

entry: {
    'myfile.ts'
},
output: {
    filename: 'myfile.js',
    library: 'MyApp',
    libraryTarget: 'umd'
},
resolve: {
    extensions: ['', '.ts', '.js']
},
module: {
    loaders: [{
        test: /\.ts$/, loader: 'babel!ts-loader'
    }]
}

myfile.ts just exports a class:

export default class MyApp {...

Answer 1

You could convert the bundle output to a global variable . Currently libraryTarget points to UMD which supports Commonjs and AMD