After converting my JavaScript application to TypeScript and using ES6-style exports, I encountered an issue with babel/webpack not exporting the code correctly.
The use of export default... syntax by TypeScript results in babel transforming it into an esModule object where the class is nested under a default property.
This new object format poses problems for users trying to make use of the code.
I attempted to resolve this by adding the babel-plugin-add-module-exports plugin, but unfortunately, it did not address the issue. Could TypeScript integration be causing complications?
.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 simply exports a class:
export default class MyApp {...