我正在启动一个React应用,这是我的Webpack配置:
'use strict' const ExtractPlugin = require('extract-text-webpack-plugin') const HTMLPlugin = require('html-webpack-plugin') module.exports = { devtool: 'eval', entry: `${__dirname}/src/main.js`, output: { filename: 'bundle-[hash].js', path: `${__dirname}/build`, publicPath: '/', }, mode: 'development', performance: { hints: false }, plugins: [ new HTMLPlugin(), new ExtractPlugin('bundle-[hash].css'), ], module: { rules: [ { test: /\.js$/, exclude: /node_module/, loader: 'babel-loader', }, { test: /\.scss$/, loader: ExtractPlugin.extract(['css-loader', 'sass-loader']), }, ], }, }
然后,我有一个package.json文件,这是依赖项:
"devDependencies": { "@babel/core": "^7.1.6", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", "and": "0.0.3", "babel-cli": "^6.26.0", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.4", "eslint": "^5.9.0", "install": "^0.12.2", "jest": "^23.6.0", "npm": "^6.4.1", "webpack-cli": "^3.1.2" }, "dependencies": { "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "css-loader": "^1.0.1", "extract-text-webpack-plugin": "^4.0.0-beta.0", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.11.0", "react": "^16.6.3", "react-dom": "^16.6.3", "resolve-url-loader": "^3.0.0", "sass-loader": "^7.1.0", "webpack": "^4.25.1", "webpack-dev-server": "^3.1.10" }
我尝试了很多方法来将babel软件包更新到第7版,更改babelrc配置,无论如何。
该项目虽然可以编译,但是在编译开始时会收到以下消息:
跟踪:节点类型SpreadProperty已在Object.isSpreadProperty处重命名为SpreadElement。
大约有几百行。在打印完所有行之后,编译过程将继续并成功完成。
那是什么,我如何摆脱这些行?
这是为我解决问题的最终设置。
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-object-rest-spread" ] }
为了更好地理解,这是我的package.json的 devDependencies :
"devDependencies": { "@babel/core": "^7.1.6", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/plugin-transform-react-jsx": "^7.1.6", "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", "babel-loader": "8.0.4", "prop-types": "15.6.2", "react": "^16.6.3", "react-dom": "^16.6.3", "style-loader": "^0.23.1", "utils": "^0.3.1", "webpack": "4.26.1", "webpack-cli": "3.1.2", "webpack-dev-server": "^3.1.10" }
这是我的 webpack.config.js 模块的部分:
module: { rules: [ { test: /\.(js|jsx)$/ , exclude: /node_modules/, loaders: "babel-loader" } ] }