Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
....
在这里插入图片描述
没找到@babel/core，需要把babel-core卸载掉，从新安装@babel/core
npm un babel-core
npm i -D @babel/core
ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
...
上面是我的旧版本代码
下面是你需要更新的代码
- @babel/preset-env
- @babel/preset-react
babel舍弃了以前的 babel-- 的命名方式，改成了@babel/-
修改依赖和.babelrc文件后就能正常启动项目了。
webpack不用修改（除非你是webpack 3.X 升webpack 4.X）
package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "components/虚拟DOM.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-preset-mobx": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.6",
"@babel/runtime": "^7.0.0",
"react-dom": "^16.8.6"
}
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
webpack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 index 页面的插件
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, '/src/index.html'), // 源文件
filename: 'index.html' // 生成的内存中首页的名称
})
// 向外暴露一个打包的配置对象； 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack 默认只能打包处理 .js 后缀名类型的文件； 像 .png .vue 无法主动处理，所以要配置第三方的loader；
module.exports = {
mode: 'development', // development production
// 在 webpack 4.x 中，有一个很大的特性，就是 约定大于配置 约定，默认的打包入口路径是 src -> index.js
plugins: [
htmlPlugin
],
module: { // 所有第三方 模块的配置规则
rules: [ // 第三方匹配规则
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
]
},
resolve: {
extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
alias: { // 表示别名
'@': path.join(__dirname, './src') // 这样，@ 就表示 项目根目录中 src 的这一层路径
}
}
}