나는 여전히 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']
}
