我仍然对如何使用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')
将无法正常工作。
我觉得很笨,因为我已经阅读了很多文档,并且觉得自己缺少一些东西。避免用../../
etc写下所有相对要求的正确方法是什么?
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
为了将来参考,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)
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
只是使您进入所需的目录,而没有机会给它进一步命名空间。
万一其他人遇到了这个问题,我可以使它像这样工作:
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';
我最大的头痛是没有命名空间的路径。像这样:
./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
并且是当前应用程序文件夹,除非您在源文件夹中将应用程序命名为src/my_app
这是我的webpack默认
resolve: {
extensions: ['', '.jsx', '.js', '.json'],
root: path.resolve(__dirname),
modulesDirectories: ['node_modules']
}
如果将环境var设置为NODE_PATH
当前项目文件,那就更好了。这是一个更为通用的解决方案,如果您想在没有webpack的情况下使用其他工具,则将有所帮助:测试,整理...
我已经用Webpack 2解决了这个问题:
module.exports = {
resolve: {
modules: ["mydir", "node_modules"]
}
}
您可以将更多目录添加到数组...
如果您使用的是create-react-app,则只需添加一个.env
文件,其中包含
NODE_PATH=src/
资料来源:https : //medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d
使用Webpack 2解决了这个问题:
resolve: {
extensions: ['', '.js'],
modules: [__dirname , 'node_modules']
}
该线程很旧,但是由于没有人发布关于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')
我不明白为什么有人建议将myDir的父目录包括在webpack的modulesDirectories中,这应该很容易实现:
resolve: {
modulesDirectories: [
'parentDir',
'node_modules',
],
extensions: ['', '.js', '.jsx']
},
只需使用babel-plugin-module-resolver:
$ npm i babel-plugin-module-resolver --save-dev
.babelrc
如果还没有,请在根目录下创建一个文件:
{
"plugins": [
[
"module-resolver",
{
"root": ["./"]
}
]
]
}
根目录下的所有内容都将视为绝对导入:
import { Layout } from 'components'
有关VSCode / Eslint的支持,请参见此处。
文章标签:javascript , webpack
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!