Typescript找不到使用Webpack别名导入的模块

索森宾德

目前,我正在将我的项目设置为更加干净,尤其是在带有参考的前端部分中。

事后看来,我注意到我对前端文件的文件夹结构非常慷慨,最终出现了很多层。这就是为什么我决定研究webpack在这种情况下可以做什么的原因,并了解别名功能。

这是我的设置方式:

resolve: {
    alias: {
        components: path.resolve(__dirname, "Scripts/Views/Components"),
        data: path.resolve(__dirname, "Scripts/Data"),
        definitions: path.resolve(__dirname, "Scripts/Definitions"),
        helper: path.resolve(__dirname, "Scripts/Helper"),
        scripts: path.resolve(__dirname, "Scripts"),
        views: path.resolve(__dirname, "Scripts/Views"),
    },
    extensions: [".tsx", ".ts", ".js", ".jsx"],
    modules: ["node_modules"]
}

如您所见,我在这里为各种文件夹创建了别名。

这是我的文件夹结构:

在此处输入图片说明

现在,让我们跳到例如LoginDialog.tsx。在这里,我试图这样导入:

import { IErrorAttachedProperty } from "definitions/formHelper";

但是,我最后遇到的一个错误是,无法以这种方式找到任何模块。

我在这里做错了什么?

如果有任何意义-webpack.config.js与Scripts文件夹位于同一目录中。

朱拉杰夫

您必须为打字稿配置tsconfig.json

"baseUrl": "./",
"paths": {
  "components/*": [
    "./src(or any other path)/Scripts/Views/Components"
  ]
},

这是ts别名的好例子

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章