Webpack 无法正确解析我的别名答案

【问题标题】：Webpack doesn't resolve properly my aliasWebpack 无法正确解析我的别名
【发布时间】：2016-07-21 19:18:33
【问题描述】：

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

尽管我在这里遵循了 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，但它也不起作用。

你知道出了什么问题吗？

【问题讨论】：

而您尝试直接在别名中解析路径，例如：myApp: path.resolve( __dirname, 'src' )
我试过了，还是不行...同样的错误。
alias: { myApp: 'src' } 怎么样？这就是我的设置。
你肯定有src/utils/myUtils.js或src/utils/myUtils/index.js？
我试过src 也不起作用。文件名是myUtils.js，但它应该根据extensions 属性来解析它。

标签： javascript node.js reactjs ecmascript-6 webpack

【解决方案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 中的每个文件夹设置一个别名。

【讨论】：

我也试过这个，但我无法让它工作。它创建构建，但不断抛出此错误。看起来我的问题在其他地方......

【解决方案2】：

我使用没有下一个语法：

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

    }

import points from 'Data/points.json';

【讨论】：

【解决方案3】：

这对很多人来说可能很明显，但如果你像我一样，花了太多时间试图弄清楚为什么它在从 Windows 或 Mac 迁移到 Linux 时突然不起作用，那么请检查路径中的大小写...

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

希望这可以为某人节省一些时间。或者我只是笨，我不知道。

【讨论】：

简而言之：一些操作系统/文件系统区分大小写，所以这个问题不是由于resolve.alias，而是文件系统上的文件查找方式。

【解决方案4】：

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

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

更多帮助可以在Webpack Doc找到

【讨论】：

【解决方案5】：

大多数情况下，这取决于您的项目文件夹结构。如果你的 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”。

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

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

【讨论】：

【解决方案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 文件夹本身）

【讨论】：