使用 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']
  },