Webpack Reactを使用してプロジェクトフォルダ外に再利用可能なコンポーネントを移動する

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 

私が話したファイルは、家の中にあります。基本的にhomeとaboutは2種類のnpmプロジェクトで、webpack.config.jsと同様に独自のpackage.jsonを持っています。しかし、Searchbox.jsxファイルのSearchBoxという名前の反応コンポーネントには、root/components/reactというフォルダにアクセスする必要があります。

私は自宅からアクセスしようとすると、それは言ってエラーを示しています

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

それでは、どのように私はこの問題を解決するのですか、あなたは私がしている再利用可能なコンポーネントを作るために使用することができ、他の方法を提案することができますプロジェクトフォルダの外に

Answer 1

私はこれを解決しました。 私がやったのは、npmをインストールして反応フォルダにノードモジュールをインストールし、そこに.babelrcファイルも置いていました。それは、SearchBox.jsxのホームディレクトリではなく、reactディレクトリからnode_modulesをロードしようとしていました。

他の誰かがこの問題に遭遇した場合、それを解決する方法は、外部ファイルのすべてのノード依存関係を、ファイル自身のディレクトリまたはファイルの親ディレクトリのいずれかにインストールすることです。それがどこからそれを取り出すのか。