使用webpack解析需求路径

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

Webpack> 2.0

请参阅wtk的答案.

Webpack 1.0

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

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

resolve.root

包含模块的目录(绝对路径).也可以是一系列目录.此设置应用于将单个目录添加到搜索路径.

在你的情况下:

webpack配置

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

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

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

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

Answer 6

我最头疼的是没有命名空间路径.像这样的东西:

./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')

如您所见,我的所有应用代码都位于强制路径命名空间内.这非常清楚哪些需要调用库,应用程序代码或测试文件.

为此,我确保我的解析路径只是node_modules当前的app文件夹,除非你在你的源文件夹中命名你的应用程序src/my_app

这是webpack的默认设置

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

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