所以我一直在尝试设置 React Js 环境。我遇到了 babel 依赖项错误。我知道这个问题很常见,有很多答案,但到目前为止,没有一个对我有用。我在网上搜索过解决办法,但仍然显示相同的错误。
这是我收到的错误:
ERROR in ./main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-es2015' from 'D:\my-app' at Function.module.exports [as sync] (D:\my-app\node_modules\resolve\lib\sync.js:58:15) at resolveStandardizedName (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:101:31) at resolvePreset (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:58:10) at loadPreset (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:77:20) at createDescriptor (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:154:9) at items.map (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:50) at Array.map (<anonymous>) at createDescriptors (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:29) at createPresetDescriptors (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:101:10) at passPerPreset (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:58:96) Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/webpac
This is my .babelrc
{ "presets": ["es2015"] }
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './main.js', output: { path: path.join(__dirname, '/bundle'), filename: 'index_bundle.js' }, devServer: { inline: true, port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, plugins:[ new HtmlWebpackPlugin({ template: './index.html' }) ] }
package.json
{ "name": "my-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "react": "^16.8.6", "react-dom": "^16.8.6", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.3.1" }, "devDependencies": { "@babel/core": "^7.4.4", "@babel/preset-env": "^7.4.4", "@babel/preset-es2015": "^7.0.0-beta.53", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0", "webpack": "^4.31.0" } }
babel-loader@8.x使用 Babel 7.x,即 @babel/core@^7.0.0,更重要的是,在您的情况下 @babel/preset-env@7 取代了 babel-preset-env@^1.7.0。
你需要确保
npm install @babel/core @babel/preset-env
并更新你的 Babel 配置以使用 @babel/preset-env 而不是 babel-preset-env,例如
"presets": [ "@babel/preset-env" ]
注意:对于遇到此问题的其他人来说,问题也可能是您在 Babel 7 上使用来自 Babel 6 的插件/预设。如果您使用第三方 Babel 预设,这可能很难注意到,因为预设的版本可能与 Babel 本身的版本不匹配。