上反應的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/ 
}