[已解决]如何在不使用plugin的情况下让babel支持stage4语法(2023-03-09)?

Question

问题描述

在开发过程中,经常会遇到使用新语法编译失败的问题,比如可选链,非空联合操作符,装饰器等.

Module parse failed: Unexpected token (24424:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       this.setState({
|         items: finalTableItems,
>         itemsActive: active ?? finalTableItems.every(item => item.active),
|         ids
|       });

每当遇到这种情况时都得在babel配置文件中新增一个插件来解决.

目前的babel配置

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

问题

看官网的描述是@babel/preset-env默认支持stage3+以上的语法,非空联合操作符已经处于stage4阶段,为什么还要手动配置plugins配置?

Note: @babel/preset-env won't include any JavaScript syntax proposals less than Stage 3 because at that stage in the TC39 process, it wouldn't be implemented by any browsers anyway. Those would need to be included manually. The shippedProposals option will include Stage 3 proposals that some browsers have already implemented.

Nullish Coalescing for JavaScript
Status
Current Stage:
Stage 4

尝试把@babel/preset-env升级到最新的7.2.0,把babel-loader升级到8.3.0问题依旧

Answer 1

原因分析

@babel/preset-env本身默认就支持stage4阶段的语法.之所以会报错,是因为没有loder处理这个文件

currently no loaders are configured to process this file

问题解决

在webpack配置中增加对这个文件的处理即可