Tyepscript/es6 模块由 babel/webpack 导出为具有默认属性的_esModule

Tyepscript/es6 module exported by babel/webpack as _esModule with default property

本文关键字:默认 属性 esModule 模块 es6 babel webpack Tyepscript      更新时间:2023-09-26

我已经将一个javascript应用程序转换为typescript,但是现在我已经将我的代码转换为typescript/es6风格的导出,babel/webpack没有正确导出它们。

由于我现在使用 export default... 语法,babel 将其转换为一个 esModule 对象,该类实际上附加到 default 属性。

当然,这种对象格式对实际使用它的任何人都不再有效。

我尝试将 babel-plugin-add-module-exports 插件添加到组合中,但它没有改变任何东西。我想知道打字稿是否混合在一起导致了问题。

.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只导出一个类:

export default class MyApp {...

您可以将捆绑包输出转换为全局变量。目前libraryTarget指向支持CommonJS和AMD的UMD