Question

我正在尝试为我的应用程序创建一个名称空间作为模块，并使用此命名空间导入我的组件并限制使用相对路径。

尽管我在这里遵循了webpack文档的别名：http://webpack.github.io/docs/configuration.html#resolve-alias 我不能让它发挥作用。

这是我的解析对象的样子：

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，但它也不起作用。

你知道出了什么问题吗？

Answer 1

将别名解析为绝对路径应该可以解决问题：

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

使用一个简单示例检查此webpack resolve alias gist。

限制相对路径数量的另一个解决方案是将./src文件夹添加为root而不是别名：

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

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

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

您可以从components和utils导入，如下所示：

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

为./src中的每个文件夹添加别名。

Answer 2

大多数情况下，它取决于您的项目文件夹结构。如果您的webpack文件位于文件夹中，请确保相应地对其进行处理

.
├── node_modules
├── src
│   ├── components
│   └── config/webpack.config.js

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

我们经常将文件夹命名为“源”，但在路径中使用“ src”。

该死！复制粘贴花了我很多调试时间

希望这可以帮助由于上述原因而面临此类问题的人。

Answer 3

我使用时没有下一种语法：

Array ( 
      [title] => Price test title 
      [content] => Price test content 

      [0] => Array ( 
             [title] => Price test title 
             [content] => Price test content 
      ) 
)

Answer 4

这对于许多人来说可能是显而易见的，但是如果您像我一样花了太多时间试图弄清为什么从Windows或Mac迁移到Linux时突然不起作用，然后检查路径是否正确...

我和项目中的其他每个人都在使用Windows或Mac，但在家里我喜欢使用双启动ubuntu。在克隆代码并运行Webpack时，我遇到了很多Cannot resolve module...错误。我花了比我更愿意花费的时间去寻找节点，npm，webpack或其他内容中的一些晦涩的错误，直到我注意到失败的模块的路径类似于@app/Shared/settings.js，并且要求是require('@app/shared/settings') 。 Windows不在乎，所以一切都很好，直到我开始使用linux为止。事实证明，问题不在于webpack，节点或其他任何东西，所以这可能就是为什么我没有发现有人暗示这可能是问题的原因。

希望这可以为某人节省一些时间。也许我只是愚蠢，我不知道。

Answer 5

我遇到了同样的错误。最终我发现问题是我写了两次resolve。第二个resolve将覆盖前一个。我的代码是这样的：

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

更多帮助，请访问Webpack Doc

Answer 6

在我的情况下，我想为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文件夹本身）

Webpack无法正确解析我的别名

6 个答案: