Webpack无法正确解析我的别名

lndjwyie  于 2023-10-19  发布在  Webpack
关注(0)|答案(7)|浏览(162)

我试图有一个命名空间为我的应用程序作为一个模块工作,并使用此命名空间导入我的组件,并限制相对路径的使用。
虽然,尽管我在这里遵循了alias的webpack文档:我http://webpack.github.io/docs/configuration.html#resolve-alias不能去上班了.
这就是我的resolve对象的样子:

resolve: {
  root: path.resolve(__dirname),
  alias: {
    myApp: './src',
  },
  extensions: ['', '.js', '.json', '.jsx']
}

path.resolve(__dirname)解析/Users/Alex/Workspace/MyAppName/ui/
我以这种方式将我的文件导入文件/Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx

import { myMethod } from 'myApp/utils/myUtils';

我在构建过程中得到以下错误:

ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
 @ ./src/components/Header/index.jsx 33:19-56

我也试过modulesDirectories,但它也不工作。
你知不知道哪里出问题了?

zhte4eai

zhte4eai1#

将别名解析为绝对路径应该可以做到这一点:

resolve: {
  alias: {
    myApp: path.resolve(__dirname, 'src'),
  },
  extensions: ['', '.js', '.jsx']
}

用一个简单的例子来检查这个webpack resolve alias gist
限制相对路径数量的另一个解决方案是将./src文件夹添加为根目录,而不是对其使用别名:

resolve: {
  root: [path.resolve('./src')],
  extensions: ['', '.js', '.jsx']
}

然后,您将能够要求./src中的所有文件夹,就好像它们是模块一样。例如,假设您有以下目录结构:

.
├── node_modules
├── src
│   ├── components
│   └── utils

你可以像这样从componentsutils导入:

import Header from 'components/Header';
import { myMethod } from 'utils/myUtils';

类似于为./src中的每个文件夹指定一个别名。

pdtvr36n

pdtvr36n2#

大多数情况下,这取决于您的项目文件夹结构。如果你的webpack文件在一个文件夹中,那么确保你相应地处理它。

.
├── node_modules
├── src
│   ├── components
│   └── config/webpack.config.js
modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, '../src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

同样,我们经常将文件夹命名为“source”,但在路径中使用“src”。
该死!复制粘贴占用了我很多调试时间
希望这能帮助那些由于上述原因而面临这些问题的人。

f1tvaqid

f1tvaqid3#

这对许多人来说可能是显而易见的,但如果你像我一样,花了太多时间试图弄清楚为什么从Windows或Mac移动到Linux时突然不起作用,然后检查路径中的大小写.
我和项目中的其他人都在使用Windows或Mac,但在家里,我双 Boot Ubuntu,我喜欢使用。在克隆我们的代码和运行webpack时,我得到了很多Cannot resolve module...错误。我花了比我想承认的更多的时间在node,npm,webpack或任何东西中搜索一些模糊的错误,直到我注意到失败模块的路径类似于@app/Shared/settings.js,而require是require('@app/shared/settings')。Windows不在乎,所以一切都很好,直到我开始在Linux上工作。事实证明,问题不是webpack,node或其他任何东西,所以这可能就是为什么我没有发现任何人暗示这可能是问题的原因。
希望这能为某人节省一些时间。或者我只是太笨了,我不知道。

8ulbf1ek

8ulbf1ek4#

我也犯了同样的错误。最后我发现问题是我写了两次resolve。第二个resolve覆盖前一个。我的代码是这样的:

modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, 'src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

更多帮助可在Webpack Doc中找到

ghhaqwfi

ghhaqwfi5#

我不使用下一个语法:

resolve: {
        alias: {
            Data:  __dirname + '/src/data'
        },
        extensions: ['.js', '.jsx', '.json']

    }

import points from 'Data/points.json';
qhhrdooz

qhhrdooz6#

在我的例子中,我想要别名mobx,这样mobx的任何导入都将始终返回相同的示例,无论导入调用是来自我的主应用程序,还是来自它使用的库之一。
起初我有这个:

webpackConfig.resolve.alias = {
    mobx: path.resolve(root, "node_modules", "mobx"),
};

但是,这只会强制从我的应用程序自己的代码中导入mobx以使用别名。
为了让它也能用于库的导入调用,我必须做:

webpackConfig.resolve.alias = {
    mobx: path.resolve(root, "node_modules", "mobx"),
    "LIBRARY_X/node_modules/mobx": path.resolve(root, "node_modules", "mobx"),
};

这很奇怪,因为我很确定以前只使用mobx别名就可以在这两个上下文中工作,但现在显然不行了(Webpack v4.41.2)。
以上就是我解决的方法。(在我的例子中,我需要它来防止两个mobx示例被使用,因为这会破坏东西,而LIBRARY_X是使用npm-link符号链接的,所以我不能删除/统一辅助mobx文件夹本身)

qlvxas9a

qlvxas9a7#

添加对我有用的东西,因为当我搜索“webpack resolve alias not working”时,这仍然会首先弹出,并且现有的答案对我都不起作用。
我的配置使用了绝对路径the top voted answer suggests

resolve: {
  alias: {
    myApp: path.resolve(__dirname, '@packageName'),
  },
  extensions: ['', '.js', '.jsx']
}

但它仍然抛出了OP所描述的相同类型的错误。我主要在monorepo中工作,我意识到这是因为webpack试图解析一个依赖项(monorepo中的兄弟包)上的导入,而这个依赖项并不作为源包的依赖项存在。
基本上,我有packageA引用packageBpackageB正在导入packageC(所有3个都是monorepo中的兄弟包)。Webpack试图使用packageA作为解析(即packageA/node_modules/packageC)来解析packageC,但packageC不是packageA的直接依赖项,而是packageB的依赖项,这引发了错误。我发现我可以添加额外的别名来解决这个问题,就像下面在packageA的webpack配置中一样(取决于你的树结构):

resolve: {
  alias: {
    @packageB: path.resolve(__dirname, 'node_modules/@packageB'),
    @packageC: path.resolve(__dirname, '../', 'packageB/node_modules/@packageC'),
  },
  extensions: ['', '.js', '.jsx']
}

我不喜欢每当出现奇怪的情况时不断添加resolve.aliases的想法,所以我最终将所有的resolve.alias引用切换到NormalModuleReplacement调用,因为我能够定义一个回调来处理所有情况(并且我在所有webpack中共享相同的回调)。

相关问题