我正在尝试使用 https:/github.comtimmywilpanzoom。 来自一个用webpack和babel编译的typescript项目。
问题是typecript方法的调用:
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
被转码成了下面的javascript:
panzoom_1.default(document.querySelector("#pic"));
然后产生了以下运行时错误。
Uncaught TypeError: panzoom_1.default is not a function
如果我调试javascript，那么 panzoom_1 具有预期的函数签名，而且它没有 default 成员。
这是无数不同类型的模块之间的问题，默认导出和babel和typecript如何导入它们的差异，但我完全不明白。根据文档。panzoom 是一个UMD模块，如果这有帮助的话。
我已经找到了一个变通的方法，以不同的方式导入，然后投向任何，但这显然是疯狂的吧？
import * as Panzoom from '@panzoom/panzoom';
(<any>Panzoom)(document.querySelector("#pic"));
以下是项目配置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="pic.jpg" id="pic" />
</body>
<script src="dist/bundle.js" type = "text/javascript"></script>
</html>
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
{
"compilerOptions": {
"outDir": ".",
"sourceMap": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"traceResolution": true,
"experimentalDecorators": true,
"baseUrl": ".",
}
}
{
"name": "grr",
"version": "0.0.0",
"private": true,
"dependencies": {
"@babel/polyfill": "^7.8.7",
"@panzoom/panzoom": "^4.1.0",
"npm-update-all": "^1.0.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-transform-async-to-generator": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"typescript": "^3.8.3"
}
}
var webpack = require("webpack");
var path = require('path');
module.exports = (env, options) => {
var PROD = (options.mode === 'production');
return {
entry: [
"@babel/polyfill",
path.resolve(__dirname, "test.ts")
],
output: {
filename: "bundle.js",
libraryTarget: "var"
},
resolve: {
modules: [
'node_modules'
],
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loaders: [
{
loader: 'babel-loader',
options:
{
compact: false,
presets: [
[
"@babel/preset-env",
{
targets: "> 0.25%, not dead"
}
]
]
}
},
'awesome-typescript-loader'
]
}
]
},
devtool : false,
optimization: {
minimize: PROD
}
}
};
{
"presets": ["@babel/env"],
"plugins": ["@babel/transform-async-to-generator"],
"compact":false
}
我已经设法通过添加 "esModuleInterop": true 到 tsconfig.json.
https:/www.typescriptlang.orgdocshandbookcompiler-options.html
发出__importStar和__importDefault助记符以实现运行时babel生态系统的兼容性，并启用--allowSyntheticDefaultImports以实现类型系统的兼容性。
这对我来说没什么意义，但这里有更多信息。