は上バベルとのWebPACKを使用している場合、このエラーを取得するドラッグ＆ドロッププロジェクト

Question

を反応させるのここでの問題である平野ReactJSを（なしは、ドラッグ＆ドロップに反応）を使用したときに使用しようとすると、バベルとWebPACKのは私の.jsファイル完璧が、をコンパイルWebPACKのとバベルを使ってJSをコンパイルするときに私のプロジェクトにドラッグ＆ドロップを反応させ、このエラーが発生しました：

ERROR in ./~/disposables/modules/index.js 
Module build failed: ReferenceError: [BABEL] D:\MyProject\React_002\node_modules\disposables\modules\index.js: Using removed Babel 5 option: D:\MyProject\React_002\node_modules\disposables\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets 
    at Logger.error (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\logger.js:41:11) 
    at OptionManager.mergeOptions (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20) 
    at OptionManager.init (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) 
    at File.initOptions (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\index.js:212:65) 
    at new File (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\index.js:135:24) 
    at Pipeline.transform (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\pipeline.js:46:16) 
    at transpile (D:\MyProject\React_002\node_modules\babel-loader\lib\index.js:48:20) 
    at Object.module.exports (D:\MyProject\React_002\node_modules\babel-loader\lib\index.js:163:20) 
@ ./~/react-dnd/lib/decorateHandler.js 41:19-41 
@ ./~/react-dnd/lib/DragSource.js 
@ ./~/react-dnd/lib/index.js 
@ ./src/js/Container.js 
@ ./src/js/script.js 

これは私のwebpack.config.jsファイル

です

var path = require('path'); 

module.exports = { 
    entry: './src/js/script.js', 
    output: { 
    path: path.join(__dirname, 'dist/js'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: '/node_modules/' 
     } 
    ] 
    } 
}; 

は、これが私の.babelrcファイル

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

であり、これは私のpackage.jsonファイル

これを解決する方法

{ 
    "name": "React_002", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "babel": "babel", 
    "webpack": "webpack", 
    "build": "rimraf dist && webpack --watch", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dnd": "^2.3.0", 
    "react-dnd-html5-backend": "^2.3.0", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "rimraf": "^2.6.1", 
    "webpack": "^2.4.1" 
    } 
} 

のですか？およびこの問題の原因は何ですか？ ありがとう

Answer 1

あなたは実際にはnode_modulesをルールから除外しません。あなたは絶対パス/node_modules/に対応する文字列、つまりファイルシステムのルートである/のnode_modulesディレクトリに渡しました。それは正規表現でなければならず、/regex/は正規表現のリテラル構文ですが、その前後に引用符を追加すると文字列になります（配列リテラルの前後に引用符を置いた場合と同様）。 MDN - Regular Expressionsも参照してください。

あなたのルールは次のようになります。

{ 
    test: /\.jsx?$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/ 
}