나는 여전히 webpack으로 모듈 경로를 해결하는 방법을 혼동하고 있습니다. 이제 나는 쓴다 :

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

하지만 쓰고 싶습니다

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

alias . 로 사용하는 비슷한 예제를 볼 수 있기 때문에 resolve.alias 가 도움이 될 수 있다고 생각했습니다 .{ xyz: "/some/dir" }require("xyz/file.js")

나는 내 별칭을 설정하지만 { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') 작업은하지 않습니다.

문서를 여러 번 읽었으므로 뭔가 바보 같은 느낌이 듭니다. 친척이 필요로하는 모든 것을 쓰는 것을 피하는 올바른 방법은 무엇입니까 ../../?

웹팩> 2.0

wtk의 답변을 참조하십시오 .

웹팩 1.0

이를 수행하는보다 간단한 방법은 resolve.root를 사용하는 것입니다.

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

resolve.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

나중에 참조하기 위해 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']
}

환경 변수 NODE_PATH를 현재 프로젝트 파일로 설정하면 더 좋습니다 . 이것은보다 보편적 인 솔루션이며 웹 팩없이 다른 도구를 사용하려면 테스트, 보푸라기 ...

다음과 같이 Webpack 2로 해결했습니다.

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

배열에 디렉토리를 더 추가 할 수 있습니다 ...

Webpack 2를 사용 하여이 문제를 해결했습니다.

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

create-react-app를 사용하는 경우 다음을 .env포함 하는 파일을 추가하면 됩니다.

NODE_PATH=src/

출처 : https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

이 스레드는 오래되었지만 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 지원에 대해서는 여기를 참조 하십시오 .