typescript - 打字稿找不到路径中定义的模块
问题描述
我有一个paths
用于绝对导入的打字稿应用程序。我的 tsconfig 看起来像这样:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"utils*": ["src/utils*"],
"operations*": ["src/operations*"],
"actions*": ["src/actions*"],
"components*": ["src/components*"],
"constants*": ["src/constants*"],
},
"outDir": "dist",
"module": "esnext",
"target": "esnext",
"moduleResolution": "node",
"noEmit": true,
"lib": ["es2017", "dom"],
"noUnusedLocals": true,
"sourceMap": true,
"skipLibCheck": true,
"allowJs": true,
"jsx": "preserve",
"noUnusedParameters": true,
"preserveConstEnums": true,
"strict": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
},
"exclude": [
"node_modules",
"dist",
],
"include": [
"./src/**/*"
],
"files": [
"./typings/index.d.ts"
]
}
我正在尝试像这样使用导入:
import { AppStateType } from 'actions/app';
但是我得到cannot find module 'actions/app'
我遵循了这个答案,但似乎没有用。
我在这里做错了什么?
解决方案
的模式paths
有点挑剔。
尝试这个:
"paths": {
"utils/*": ["src/utils/*"],
"operations/*": ["src/operations/*"],
"actions/*": ["src/actions/*"],
"components/*": ["src/components/*"],
"constants/*": ["src/constants/*"],
},
注意添加斜线。
既然你已经baseUrl
设置了,我认为这应该可以工作,但如果不是,下一步可能是指定完整的相对路径(相对于tsconfig
文件):
"paths": {
"utils/*": ["./src/utils/*"],
"operations/*": ["./src/operations/*"],
"actions/*": ["./src/actions/*"],
"components/*": ["./src/components/*"],
"constants/*": ["./src/constants/*"],
},
这将满足 TypeScript 编译器的要求,但如果您使用的是 Webpack 或 Parcel,您可能会抱怨他们无法找到文件,即使 TypeScript 编译得很好。在这种情况下,您需要为捆绑器设置别名。它看起来有点像这样:
// webpack.config.js or similar
// ...
resolve: {
extensions: [".js", ".jsx"], // import without .js, .jsx, .json extensions
alias: {
"utils": path.resolve(__dirname, "src/utils/*"),
"operations": path.resolve(__dirname, "src/operations/*"),
"actions": path.resolve(__dirname, "src/actions/*"),
"components": path.resolve(__dirname, "src/components/*"),
"constants": path.resolve(__dirname, "src/constants/*")
}
},
// package.json
// ...
"alias": {
"utils": "./src/utils/*",
"operations": "./src/operations/*",
"actions": "./src/actions/*",
"components": "./src/components/*",
"constants": "./src/constants/*"
}
推荐阅读
- javascript - 如何从 window.print 中删除日期?
- javascript - 更改带有id的div中单击项目的链接 - jquery
- git - 如何从本地创建和推送 repo 到 gitub
- drupal - “file_save_data”中的 FILE_EXISTS_RENAME 有时不会重命名现有文件名,并且会为“file_managed”条目中的重复条目引发错误
- c++ - 使用 glDrawElements 绘制 std::vector
- python - 用 '#' 后跟数字分割字符串
- presto - Presto中各种内存的解释清楚
- firebase - 谁能建议我如何手动(而不是通过编程)将图像存储到firebase的存储部分?
- python - 检查 Gmail 帐户以跟踪使用 Python 的空间百分比
- wordpress - Wordpress,导航到产品页面时如何修复弹出窗口?