[英]Can't import TypeScript library bundled with WebPack
在 TypeScript 項目中,我正在嘗試導入一個名為“fsaa-util”的 TypeScript 庫,該庫與 WebPack 捆綁在一起。 代碼編譯得很好,但在運行時嘗試使用該庫中的 object 時,它們是未定義的。
索引.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(),
]
};
必須在庫的webpack.config.js
的“輸出”部分添加這些行:
library: "fsaa-util",
libraryTarget: 'umd',
umdNamedDefine: true
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.