上反应的DnD项目

Question

这里使用巴贝尔的WebPack时，遇到了这个错误的问题，用普通ReactJS时（无阵营DND），巴贝尔的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文件

：在我的项目反应的DnD，这 错误编译使用的WebPack和巴贝尔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/ 
}