使用webpack解决需求路径

2020/10/25 23:41 · javascript ·  · 0评论

我仍然对如何使用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的支持,请参见此处

本文地址:http://javascript.askforanswer.com/shiyongwebpackjiejuexuqiulujing.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!