웹팩으로 필요한 경로 해결

웹팩으로 필요한 경로 해결

저는 아직도 웹팩으로 모듈 경로를 해결하는 방법이 혼란스럽습니다.이제 나는 이렇게 적습니다.

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')안 될 겁니다

그 문서를 여러 번 읽었는데 뭔가 놓치고 있는 것 같아서 어이가 없어요.입니까를 하여 모든 하지 않는 입니까?../../외?

웹팩 > 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

수 웹팩 2는 는하였습니다 2 을 한 모든 modules경로를 해결하기 위한 방법으로.s을 의미합니다.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' )예상대로 작동할 것입니다.만약 그렇지 않다면, 다른 문제가 있을 것입니다.

검색 경로에 추가하려는 모듈이 여러 개 있지만 상대 경로 없이 응용 프로그램 코드 내의 구성 요소만 참조할 수 있다면,alias가장 솔직하고 노골적인 것 같습니다.

의 .alias입니다 를 만들 수 있는 입니다.require 수 에서 볼 수 처럼; 처럼.require ,alias다를 할 수 .require, , 와을 알 수 .require( 'my-project/component' ). resolve.root더 이상 네임스페이스를 사용할 기회를 주지 않고 원하는 디렉토리로 이동하기만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';

다음과 같이 웹팩 2로 해결할 수 있습니다.

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

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

저의 가장 큰 골칫거리는 정해진 길 없이 일하는 것이었습니다.이와 같은 것:

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

이것은 웹팩의 기본값입니다.

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

환경 var를 설정해주시면 더 좋을 것 같습니다.NODE_PATH현재 프로젝트 파일에 저장합니다.이 솔루션은 보다 보편적인 솔루션이며 웹팩 없이 테스트, 보풀... 등의 다른 툴을 사용하고 싶다면 도움이 될 것입니다.

만약 당신이 create-react-app을 사용하고 있다면, 간단히 a를 추가할 수 있습니다..env파일이 들어 있는

NODE_PATH=src/

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

웹팩 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')

간단히 babel-plugin-module-resolver를 사용합니다.

$ npm i babel-plugin-module-resolver --save-dev

그런 다음 생성합니다..babelrc파일이 아직 없는 경우 루트 아래 파일:

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

그리고 뿌리내린 모든 것은 절대적인 수입품으로 취급될 것입니다.

import { Layout } from 'components'

VSCode/Eslint 지원에 대해서는 여기를 참조하십시오.

왜 웹팩의 modulesDirectorys에 내 Dir의 부모 디렉토리를 포함시키자고 제안했는지 이해할 수 없었습니다. 이렇게 하면 쉽게 성공할 수 있습니다.

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },

언급URL : https://stackoverflow.com/questions/27502608/resolving-require-paths-with-webpack