Javascript 使用webpack解析所需路径

我仍然不知道如何用webpack解析模块路径。现在我写：

myfile = require('../../mydir/myfile.js') 

但是我想写信

myfile = require('mydir/myfile.js') 

我想这可能会有帮助，因为我看到了一个类似的例子，使用

{xyz:“/some/dir”}

作为别名，然后我可以

要求（“xyz/file.js”）

但是，如果我将别名设置为

{mydir:'/absolute/path/mydir'}

，

require（'mydir/myfile.js'）

将不起作用

我觉得自己很傻，因为我已经读了很多遍医生的书，我觉得我错过了一些东西。 使用

。/../

等避免编写所有相关要求的正确方法是什么？

Webpack>2.0 看

网页1.0 更直接的方法是使用resolve.root

解析.root

包含模块的目录（绝对路径）。也可以是目录数组。此设置应用于将单个目录添加到搜索路径

就你而言：

网页包配置 消费模块 或

---

另请参见：

如果其他人遇到此问题，我可以让它这样工作：

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

其中我的目录结构是：

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

然后从

src

目录中的任意位置，我可以调用：

import MyComponent from 'components/MyComponent';

---

我最头疼的是没有名称空间的路径。大概是这样的：

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

在设置环境以执行此操作之前：

require('app.js')
require('ui/menu')
require('lodash')

我发现避免隐式的

src

路径更方便，因为它隐藏了重要的上下文信息

我的目标是要求：

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

如您所见，我的所有应用程序代码都位于一个强制路径命名空间中。这很清楚地说明了哪个require调用需要库、应用程序代码或测试文件

为此，我确保我的解析路径仅为

node_modules

和当前应用程序文件夹，除非您在源文件夹中命名应用程序，如

src/my_app

这是我对webpack的默认设置

resolve: {
  extensions: ['', '.jsx', '.js', '.json'],
  root: path.resolve(__dirname),
  modulesDirectories: ['node_modules']
}

如果将环境var

NODE\u PATH

设置为当前项目文件，效果会更好。这是一个更通用的解决方案，如果您想在不使用webpack的情况下使用其他工具，它将有所帮助：测试、筛选……

应该完全按照您描述的方式工作，因此我提供此解决方案作为一个答案，以帮助缓解原始问题中建议它不工作可能导致的任何混淆

如下所示的解析配置将为您提供所需的结果：

// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
    },
    extensions: [ '', '.js' ]
  }
}

require（'mydir/myfile.js'）

将按预期工作。如果没有，肯定还有其他问题

如果您想将多个模块添加到搜索路径中，这是有意义的，但是如果您只想能够引用应用程序代码中的组件而无需相对路径，

alias

似乎是最直接和明确的

---

alias

的一个重要优点是，它使您有机会为

所需的

s命名，这可以增加代码的清晰度；就像很容易从其他

require

s中看到引用的模块一样，

alias

允许您编写描述性

require

s，以明确您需要内部模块，例如

require（'my project/component'）

。只需将您插入所需的目录，而不给您进一步命名的机会。

为了将来参考，webpack 2删除了除模块以外的所有内容，作为解析路径的一种方法。这意味着

root

将不起作用

示例配置从以下内容开始：

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)

---

我不明白为什么有人建议将myDir的父目录包含到webpack中的ModulesDirectory中，这样做应该很容易：

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },

---

我已经用Webpack 2解决了这个问题，如下所示：

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

---

您可以向数组中添加更多目录…

如果您使用的是创建反应应用程序，您只需添加一个

.env

文件，其中包含

NODE_PATH=src/

---

来源：

使用网页2解决了此问题：

   resolve: {
      extensions: ['', '.js'],
        modules: [__dirname , 'node_modules']
    }

此线程很旧，但由于没有人发布关于require.context的内容，我将提到它：

您可以使用require.context将文件夹设置为如下所示：

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

只需使用：

$npm i巴贝尔插件模块解析器——保存开发

然后在根目录下创建一个

.babelrc

文件（如果您还没有）：

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

根目录下的所有内容都将被视为绝对导入：

从“组件”导入{Layout}

---

有关VSCode/Eslint支持，请参阅。

谢谢，我尝试了

root

、

modulesDirectories

，以及两者的混合，但都不起作用。子模块（例如，

require（“mydir/file”）

）似乎不被接受。它们应该是-我们可以查看您的网页配置吗？如果我理解正确，使用此配置将要求文件名是唯一的？

webpackoptions验证错误：无效的配置对象。已使用与API架构不匹配的配置对象初始化Web包。-configuration.resolve有一个未知属性“root”。

“作为解析路径的一种方法，webpack 2删除了除模块以外的所有内容。这意味着root将无法工作”

resolve.alias

的工作方式与您建议的完全相同。我想知道它是否因为

resolve

配置中的其他原因而失败。我使用

别名{mydir:path.resolve（{dirname'，path'，to'，mydir'）

和

require（'mydir/myfile.js'）

工作得很好。我喜欢别名：

别名：{'~'：path.resolve（{dirname）}，

有没有提示如何调整此解决方案以支持无文件扩展名的子目录导入@sethro@DimaFeldman，您的意思是require参数中没有扩展名（

require（'mydir/myfile'）

）？这应该是可行的。在

别名中可以有多个条目；我使用它从JavaScript模块的
src
目录导入，另一个从
目录导入