Webpack 无法正确解析我的别名 [英] Webpack doesn't resolve properly my alias

问题描述

我试图让我的应用程序有一个命名空间作为模块工作，并使用这个命名空间导入我的组件并限制使用相对路径.

尽管如此，即使我在此处遵循了别名的 webpack 文档:http://webpack.github.io/docs/configuration.html#resolve-alias我无法让它工作.

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

解析:{根:path.resolve(__dirname),别名:{我的应用程序:'./src',},扩展名:['', '.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';

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

 ./src/components/Header/index.jsx 中的错误找不到模块:错误:无法解析/Users/Alex/Workspace/MyAppName/ui/src/components/Header 中的模块myApp/utils/myUtils"@ ./src/components/Header/index.jsx 33:19-56

我也尝试过使用 modulesDirectories 但它也不起作用.

你知道出了什么问题吗?

解决方案

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

解析:{别名:{myApp: path.resolve(__dirname, 'src'),},扩展名:['', '.js', '.jsx']}

用一个简单的例子检查这个 webpack 解析别名要点.

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

解析:{根:[path.resolve('./src')],扩展名:['', '.js', '.jsx']}

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

<预><代码>.├── node_modules├── src│ ├──组件│ └── 实用程序

你可以像这样从 components 和 utils 导入:

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

类似于为 ./src 中的每个文件夹设置别名.

I am trying to have a namespace for my app to work as a module, and import my components using this namespace and limit the use of relative path.

Although, even though I followed the webpack documentation for alias here: http://webpack.github.io/docs/configuration.html#resolve-alias I can't make it to work.

This is how my resolve object looks like:

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

path.resolve(__dirname) resolves /Users/Alex/Workspace/MyAppName/ui/

I import my file that way in the file /Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx:

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

I get the following error during the build:

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

I also tried with modulesDirectories but it doesn't work either.

Do you have any idea what is wrong?

解决方案

Resolving the alias to the absolute path should do the trick:

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

Check this webpack resolve alias gist with a simple example.

Another solution to limit the number of relative paths is to add your ./src folder as root instead of aliasing it:

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

Then you will be able to require all folders inside ./src as if they where modules. For example, assuming you have the following directory structure:

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

you would be able to import from components and utils like this:

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

Something like having an alias for each folder inside ./src.

这篇关于Webpack 无法正确解析我的别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！