immer diese Fehlermeldung, wenn Babel und Webpack mit auf DnD Reagieren Projekt

Question

Hier wird das Problem bei der Verwendung von Ebene ReactJS (kein DnD Reagieren), Babel und Webpack meine Js Dateien kompilieren fehlerlos, aber wenn sie versuchen, zu verwenden reagieren DnD in meinem Projekt, das Fehler aufgetreten ist, wenn js mit Webpack und Babel Kompilieren:

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 

das ist mein webpack.config.js Datei

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/' 
     } 
    ] 
    } 
}; 

das ist meine .babelrc Datei

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

und das ist meine package.json Datei

{ 
    "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" 
    } 
} 

Wie dieses Problem zu lösen? und Was sind die Ursachen für dieses Problem? Danke

Answer 1

Sie sind nicht wirklich ausgeschlossen node_modules aus der Regel. Sie haben eine Zeichenfolge übergeben, die dem absoluten Pfad /node_modules/ entspricht, also dem Verzeichnis node_modules in /, dem Stammverzeichnis Ihres Dateisystems. Es sollte ein regulärer Ausdruck sein und /regex/ ist die reguläre Ausdruck-Literalsyntax, aber wenn Sie um ihn herum Zitate hinzufügen, wird es ein String (ähnlich dem, was passieren würde, wenn Sie Anführungszeichen um ein Array-Literal setzen). Siehe auch MDN - Regular Expressions.

sollte Ihre Regel sein:

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