daw*_*daw 10 javascript typescript webpack babeljs
我正在尝试从使用 webpack 和 babel 编译的打字稿项目中使用https://github.com/timmywil/panzoom。
问题是打字稿方法调用：
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 和 typescript 导入方式的差异之间的某种类型的问题，但我完全迷失了。根据文档，panzoom如果有帮助，是一个 UMD 模块。
我找到了一种解决方法，可以以不同的方式导入，然后将其转换为任何方式，但这显然很疯狂，对吗？：
Uncaught TypeError: panzoom_1.default is not a function
下面是项目配置：
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>
{
"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"
}
}
import Panzoom from '@panzoom/panzoom';
Panzoom(document.querySelector("#pic"));
{
"presets": ["@babel/env"],
"plugins": ["@babel/transform-async-to-generator"],
"compact":false
}
daw*_*daw 15
我设法通过添加"esModuleInterop": true到tsconfig.json.
https://www.typescriptlang.org/docs/handbook/compiler-options.html
发出 __importStar 和 __importDefault 帮助程序以实现运行时 babel 生态系统兼容性，并启用 --allowSyntheticDefaultImports 以实现类型系统兼容性。
这对我来说毫无意义，但这里有更多信息：
了解 tsconfig 文件中的 esModuleInterop
| 归档时间： |
|
| 查看次数： |
9072 次 |
| 最近记录： |