javascript - webpack 4对意外令牌做出反应......(传播运算符)
问题描述
最近我已经Webpack 4
为我的应用程序实现了设置react
。
我的webpack.config.js
长相是这样的
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: './src/index.js',
filename: './index.html',
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64]',
sourceMap: true,
minimize: true,
},
},
],
},
],
},
plugins: [htmlWebpackPlugin],
};
这是我的package.json
脚本
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"prod": "webpack --mode production"
}
这里的问题是,当我使用...
(扩展运算符)时,它会抛出一个error
我相信这是与babel
未正确转译有关的东西。任何建议,将不胜感激。谢谢。
它抛出一个error
类似下面的东西。
ERROR in ./src/index.js
Module build failed: SyntaxError: D:/cp/src/index.js: Unexpected token (31:6)
29 | return {
30 | headers: {
> 31 | ...headers,
| ^
32 | authorization: token ? `Bearer ${token}` : null,
33 | },
34 | };
解决方案
只需安装babel-plugin-transform-object-rest-spread
模块。
https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread
然后将其添加到 .babelrc:
"plugins": [
"babel-plugin-transform-object-rest-spread",
],
推荐阅读
- shell - awk 到 csv 文件的字符串字段的零填充
- python - Pandas:解析 xml 列并拆分为单独的行
- typescript - Vue 视频嵌入请求 Typescript 文件
- c# - 将标题添加到共享滚动文件 Serilog
- python - keras.MeanSquaredError 和 reduce_sum(square(diff)) 有什么区别?
- azure - 将 Typesafe 配置文件传递给 Azure Databricks 中的 Spark 提交作业
- node.js - 在子文档数组内的子文档上使用 `$or` 时,`$` 位置运算符未找到查询所需的匹配项
- azure-sql-database - 将 Liquibase Docker 映像与 Azure Sql AAD Auth 一起使用时遇到问题
- c# - 每次运行测试时如何增加一个 int
- reactjs - ReactJS 项目,Image 属性的来源返回 CORS 失败