使用 webpack 解析 require 路径

Question

我仍然对如何使用 webpack 解析模块路径感到困惑。 现在我写：

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

但我想写

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

我认为resolve.alias可能会有所帮助，因为我看到了一个使用{ xyz: "/some/dir" }作为别名的类似示例，然后我可以require("xyz/file.js") 。

但是，如果我将别名设置为{ mydir: '/absolute/path/mydir' } ， require('mydir/myfile.js')将不起作用。

我觉得自己很笨，因为我已经阅读了很多次文档，但我觉得我错过了一些东西。 避免使用../../等编写所有相关要求的正确方法是什么？

Answer 1

网络包 >2.0

请参阅wtk 的回答。

网络包 1.0

一个更直接的方法是使用resolve.root。

http://webpack.github.io/docs/configuration.html#resolve-root

解决.root

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

在你的情况下：

网络包配置

var path = require('path');

// ...

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

消费模块

require('myfile')

或者

require('myfile.js')

另见： http : //webpack.github.io/docs/configuration.html#resolve-modulesdirectories

Answer 2

为了将来参考，作为解析路径的一种方式，webpack 2 删除了除modules所有内容。 这意味着root不会起作用。

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

示例配置开始于：

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

Answer 3

resolve.alias应该完全按照您描述的方式工作，因此我将其作为答案提供，以帮助减轻原始问题中的建议可能导致的任何混淆，即它不起作用。

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

// 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' )将按预期工作。 如果没有，那肯定是其他问题。

如果您想将多个模块添加到搜索路径中， resolve.root是有意义的，但如果您只想能够在没有相对路径的情况下引用应用程序代码中的组件，则alias似乎是最直接和明确的。

alias一个重要优点是它让你有机会命名你的require ，这可以增加你的代码的清晰度； 就像从其他require很容易看到引用了哪个模块一样， alias允许您编写描述性require ，使您显然需要内部模块，例如require( 'my-project/component' ) 。 resolve.root只是扑通一声，你到所需的目录，而不让您有机会进一步的命名空间。

Answer 4

万一其他人遇到这个问题，我能够让它像这样工作：

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

我的目录结构是：

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

然后我可以从src目录中的任何地方调用：

import MyComponent from 'components/MyComponent';

Answer 5

我最头疼的是在没有命名空间路径的情况下工作。 像这样的东西：

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

在我用来设置我的环境来执行此操作之前：

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

我发现避免隐式src路径更方便，因为它隐藏了重要的上下文信息。

我的目标是要求这样：

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

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

为此，我确保我的解析路径只是node_modules和当前的应用程序文件夹，除非您将应用程序命名为源文件夹中的src/my_app

这是我使用 webpack 的默认设置

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

如果将环境NODE_PATH设置为当前项目文件，那就更好了。 这是一个更通用的解决方案，如果你想在没有 webpack 的情况下使用其他工具，它会有所帮助：测试、linting ......

Answer 6

我已经用 Webpack 2 解决了这个问题：

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

您可以将更多目录添加到数组...

Answer 7

如果您使用的是create-react-app ，则只需添加一个.env文件，其中包含

NODE_PATH=src/

来源： https : //medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Answer 8

使用 Webpack 2 解决了这个问题：

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

Answer 9

这个帖子很旧，但由于没有人发布有关 require.context 的帖子，我将提及它：

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

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

return req('./myfile.js')

Answer 10

只需使用babel-plugin-module-resolver ：

$ npm i babel-plugin-module-resolver --save-dev

如果你还没有，那么在 root 下创建一个.babelrc文件：

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

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

import { Layout } from 'components'

有关 VSCode/Eslint 支持，请参见此处。

Answer 11

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

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