安装 ES2018 object spread operator babel 插件报错
Posted
技术标签:
【中文标题】安装 ES2018 object spread operator babel 插件报错【英文标题】：Installing the ES2018 object spread operator babel plugin error 【发布时间】：2018-08-10 10:00:30 【问题描述】：我想对对象使用新的 ES2018 扩展运算符，我发现这个 NPM 包应该启用它：babel-plugin-transform-object-rest-spread
我的package.json：
"scripts":
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
,
"dependencies":
"npm-sass": "^2.2.1",
"vue": "^2.5.13",
"vue-event-hub": "^1.0.2",
"vue2-datepicker": "^1.8.3"
,
"devDependencies":
"@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.40",
"autoprefixer": "^8.1.0",
"babel-core": "^6.26.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015-node6": "^0.4.0",
"babel-preset-stage-2": "^6.24.1",
"chalk": "^2.3.2",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.0.4",
"node-notifier": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"ora": "^2.0.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.1",
"postcss-url": "^7.3.1",
"rimraf": "^2.6.2",
"semver": "^5.5.0",
"shelljs": "^0.8.1",
"uglifyjs-webpack-plugin": "^1.2.2",
"url-loader": "^1.0.1",
"vue-loader": "^14.1.1",
"vue-style-loader": "^4.0.2",
"vue-template-compiler": "^2.5.13",
"webpack": "^4.1.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.2"
,
"engines":
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
当然还有package-lock.json
"babel-plugin-transform-object-rest-spread":
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
"integrity": "XXXXXXXXXXX",
"dev": true,
"requires":
"babel-plugin-syntax-object-rest-spread": "6.13.0",
"babel-runtime": "6.26.0"
,
这里是 NPM 包的链接：https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread
这没什么，这就是为什么我更难找出原因。
我尝试安装：babel-preset-es2015-node6，但这没有帮助，我尝试将"es2015-node6" 添加到.babelrc 中的"presets"，同样没有任何运气。
所以现在当我尝试使用它时，我在构建过程中遇到了错误：
- invalid expression: Unexpected token ... in
...selected_car, date: state.todays_date.toLocaleDateString()
此错误是由以下原因引起的：
<div>
<Car v-if="cars.length > 0" v-for="(car,index) in cars" :key="'car-'+index" :data=" ...car, date: state.todays_date.toLocaleDateString()" :selected="false" />
<Car v-if="selected_cars.length > 0" v-for="(selected_car,ind) in selected_cars" :key="'selected-car-'+ind" :data=" ...selected_car, date: state.todays_date.toLocaleDateString()" :selected="true"/>
</div>
在CarVue 组件的:data 属性中。
抱歉，我在上次编辑时错误地延迟了我的 .babelrc：
"presets": [
["env",
"modules": false,
"targets":
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
],
"stage-2"
],
"plugins": ["babel-plugin-transform-es2015-destructuring", "transform-object-rest-spread", "transform-vue-jsx", "transform-runtime"]
我的webpack.base.conf.js 看起来像这样：
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir)
return path.join(__dirname, '..', dir)
module.exports =
context: path.resolve(__dirname, '../'),
entry:
app: './src/main.js'
,
output:
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
,
resolve:
extensions: ['.js', '.vue', '.json'],
alias:
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
,
module:
rules: [
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
,
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
,
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options:
limit: 10000,
name: utils.assetsPath('Images/[name].[ext]')
,
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options:
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
,
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options:
limit: 10000,
name: utils.assetsPath('Stylesheets/[name].[ext]')
]
,
node:
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
【问题讨论】：
您是否尝试过将预设 env 更改为 es2015？ 也许添加到您的问题中，mcve 的源代码会产生此错误。 @Dencio 是的，我尝试添加 es2015 预设，但由于 Babel-core 6.22 应该没有必要。 @RobC 刚刚添加了导致错误的 sn-p，我还没有尝试在其他任何地方使用... 运算符。
我还发现，如果我尝试使用任何其他 Babel 插件，它就不起作用。
请重新添加你当前的.babelrc，它似乎已经被编辑掉了。
【参考方案1】：
为了在模板中使用 Object rest spread，您需要：
-
使用 Node v8.3+
为vue-loader 配置buble 选项：
buble: objectAssign: 'Object.assign'
如果针对任何 IE，请确保包含用于 Object.assign 的 polyfill。
请在您的build/vue-loader.conf.js 文件中使用以下配置
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports =
loaders: utils.cssLoaders(
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
),
transformToRequire:
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
,
buble: objectAssign: 'Object.assign'
如需更多帮助，请查看同一类型的问题here。
我已经创建了演示 ESNext-In-vue 存储库，用于在 Vue 模板中使用 Object rest spread。
希望对你有帮助！！
【讨论】：
能否与我分享 repo 或示例演示 repo？ 抱歉，我无法分享 repo，还有哪些文件可以帮助您？ 所以我不必对我的 .babelrc 文件进行任何更改？ 你不必在 babelrc 中改变 Nice 就像一个魅力，你认为它也适用于这个：github.com/babel/babel/tree/master/packages/… ??以上是关于安装 ES2018 object spread operator babel 插件报错的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 ES6 Object spread 更新数组内的对象？