无法导入与 WebPack 捆绑在一起的 TypeScript 库

Question

在一个TypeScript项目中，我试图导入一个名为"fsaa util"；我与WebPack捆绑在一起。代码编译fines，但在运行时尝试使用该库中的对象时，它们是未定义的。

index.ts:

import { MyClass } from "fsaa-util";
let t = new MyClass(); //Throws MyClass is not a constructor.
console.log(t);

图书馆的index.ts：

import "reflect-metadata";
export { default as MyClass } from "MyClass";

MyClass.ts:

export default class MyClass {
}

库的tsconfig.json：

{
"compilerOptions": {
"noImplicitAny": true,
"module": "es6",
"target": "es6",
"jsx": "react",
"jsxFactory": "h",
"strict": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"declaration": true,
"declarationDir": "./dist",
"baseUrl": "./src",
"outDir": "./dist",
"plugins": [
{ "transform": "typescript-transform-paths" },
{ "transform": "typescript-transform-paths", "afterDeclarations": true }
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}

库的Webpack.config.js:

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'index.js',
publicPath: '/dist/',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
},
{
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
allowTsInNodeModules: true,
appendTsSuffixTo: [/.vue$/],
compiler: 'ttypescript'
}
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.wasm', '.mjs', '.js', '.json', 'css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
modules: ["src", "node_modules"]
},
plugins: [
new VueLoaderPlugin(),
]
};

Answer 1

必须在"输出"；图书馆webpack.config.js部分：

library: "fsaa-util",
libraryTarget: 'umd',
umdNamedDefine: true