Dom*_*ski 21 babel reactjs webpack
我正在推出一个反应应用程序,这是我的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']),
},
],
},
}
Run Code Online (Sandbox Code Playgroud)
然后,我有一个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"
}
Run Code Online (Sandbox Code Playgroud)
我已经尝试了很多方法来更新babel包到第7版,更改babelrc配置,什么都有.
该项目虽然编译,但在编译开始时我收到以下消息:
跟踪:节点类型SpreadProperty已在Object.isSpreadProperty重命名为SpreadElement
大约有一百行.在打印完所有行之后,编译过程继续并成功完成.
那是什么,我怎么能摆脱这些行?
小智 26
这是解决问题的最终设置.
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread"
]
}
Run Code Online (Sandbox Code Playgroud)
为了更好地理解,这是我的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"
}
Run Code Online (Sandbox Code Playgroud)
这是我的webpack.config.js模块的部分:
module: {
rules: [
{
test: /\.(js|jsx)$/ ,
exclude: /node_modules/,
loaders: "babel-loader"
}
]
}
Run Code Online (Sandbox Code Playgroud)
Han*_*bib 17
由于使用过时而发生此问题
`"babel-plugin-transform-object-rest-spread"`
Run Code Online (Sandbox Code Playgroud)
在package.json中更新它
`"@babel/plugin-proposal-object-rest-spread": "^7.0.0",`
Run Code Online (Sandbox Code Playgroud)
并在我的情况下更新.babelrc.js文件,如下所示
const isTest = String(process.env.NODE_ENV) === 'test'
module.exports = {
presets: [["@babel/env", { modules: isTest ? 'commonjs' : false }, "@babel/react"]],
plugins: [
'syntax-dynamic-import',
'transform-class-properties',
'@babel/plugin-proposal-object-rest-spread',
],
}
Run Code Online (Sandbox Code Playgroud)
这解决了我的问题
Mad*_*cks 12
在我的.babelrc中
我正在使用插件: ["transform-object-rest-spread", { "useBuiltIns": true }],
然后我将其切换到"@babel/plugin-proposal-object-rest-spread"所有这些警告都消失了,这非常好。`
小智 5
就我而言,我没有实现Webpack配置,仍然出现错误。在实施了如此多的解决方案之后,该错误是相同的,或者一旦删除了错误,就会出现另一个错误。最后,我删除.bablerc,.babelrc并且package-lock.json文件就跑rm -rf node_modules && npm install,然后跑了react-native run-android,它为我工作。:-)
| 归档时间: |
|
| 查看次数: |
13040 次 |
| 最近记录: |