Webpack을 사용하여 프로젝트 폴더 외부에서 재사용 가능한 구성 요소 이동 Rex

Question

Webpack 및 React를 사용하여 응용 프로그램을 빌드 중입니다.

내 package.json은 다음과 같습니다

{ 
    "name": "v1", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "webpack": "^1.13.2" 
    } 
} 

webpack.config.js :

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, ''); 
var APP_DIR = path.resolve(__dirname, 'core'); 

var config = { 
entry: APP_DIR + '/main.jsx', 
output: { 
    path: BUILD_DIR, 
    filename: 'main.js' 
}, 
module : { 
    loaders : [ 
     { 
      test: /.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015'] 
      } 
     } 
    ] 
} 
}; 

module.exports = config; 

.babelrc :

이 파일은 중첩 된 폴더에

{"presets" : ["es2015", "react"]} 

, 예 :

root 
| components 
| | react 
| | ember 
| pages 
| | | home 
| | | about 

내가 이야기 한 파일은 집안에 있습니다. 기본적으로 집과 약 2 개의 npm 프로젝트가 있고 그들 만의 package.json과 webpack.config.js가 있습니다. 그러나 Searchbox.jsx 파일의 SearchBox라는 반응 구성 요소에 액세스하려면 root/components/react 폴더가 필요합니다. 나는이 문제를 해결 어떻게 그래서

Module build failed: Error: Couldn't find preset "es2015" relative to directory root/components/react

, 또는 당신은 내가있는 재사용 가능한 컴포넌트를 만들기 위해 사용할 수있는 다른 방법을 제안 할 수 있습니다 :

내가 집에서 액세스하려고이 말에 오류가 표시 프로젝트 폴더 외부

Answer 1

나는 이것을 해결했다. 내가 한 것은 npm 설치를 통해 react 폴더에 노드 모듈을 설치하고 .babelrc 파일도 거기에 넣는 것입니다. SearchBox.jsx의 홈 디렉토리가 아닌 react 디렉토리에서 node_module을로드하려고했습니다.

다른 사람이이 문제를 겪는 경우 해결 방법은 외부 파일의 모든 노드 종속성을 파일의 자체 디렉토리 또는 파일의 일부 상위 디렉토리에 설치하는 것입니다. 그게 어디에서 가져옵니다.