babel 在编译箭头函数时报 "Unexpected token" 问题

本文介绍了解决使用Babel进行webpack打包时遇到的箭头函数语法错误问题。通过修改.babelrc配置文件并安装babel-preset-stage-1预设,成功解决了编译过程中的SyntaxError。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

babel 在编译箭头函数时报错问题


今天在用webpack打包时遇到了如下错误:

Module build failed: SyntaxError: D:/workspace/vs/simple-database/app/containers/App.jsx: Unexpected token (86:7)
  84 |   }
  85 |
> 86 |   test = () => {
     |        ^
  87 |     return '';
  88 |   }
  89 |

我的.babelrc为

{
  "presets": [
    "es2015",
    "react"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

查找原因为箭头函数为ES7所支持的语法所以要修改.babelrc文件为

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

还记得要安装这个预设

npm install -D babel-preset-stage-1

问题解决。

### 解决方案 当遇到 `Uncaught SyntaxError: Unexpected token` 错误时,通常意味着 JavaScript 解析器遇到了无法识别的字符或不符合语法规则的内容。对于特定于内联 Babel 脚本中的此类错误,可以采取以下措施来排查和解决问题。 #### 1. 检查 HTML 文件中的脚本标签 确保 `<script>` 标签内的代码没有拼写错误或其他不合法的标记。如果使用的是 ES6 或更新版本的特性,确认浏览器支持这些新特性的解析[^1]。 ```html <!-- 正确 --> <script type="text/babel"> const app = { message: 'Hello world' }; </script> <!-- 可能引起错误 --> <script> let app = {message:'Hello world'}; console.log(app); // 如果这里有多余的符号或者非法字符就会引发错误 </script> ``` #### 2. 验证外部资源加载路径 如果是通过 URL 加载外部 JS 文件,则需验证该链接是否有效以及返回的数据格式正确无误。特别是当尝试引入未经过适当处理(如编译)的现代 JavaScript 特性到旧版环境中运行时可能会出现问题[^3]。 #### 3. 审视 Babel 编译设置 Babel 是用来转换最新 ECMAScript 到向后兼容版本工具之一;因此应该仔细检查 `.babelrc` 和 Webpack/Browserify 等构建配置文件里的 preset/plugins 是否已正确定义并适用于当前项目需求[^2]。 ```json { "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-proposal-class-properties" ] } ``` #### 4. 清除缓存重试 有时本地开发环境下的某些更改可能不会立即生效,因为它们被浏览器缓存所阻止。清除浏览数据后再刷新页面看问题是否存在改善。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值