Question

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

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

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

1 个答案: