如何使 webpack 接受没有 babel 的可选链接

Question

场景：

• 我们正在使用 webpack 4 从我们的 Javascript 源创建一个包。
• 我们不使用 Babel，因为我们只为单一平台（最新的 Chrome）创作，而且我们只使用 Chrome 中直接可用的功能，因此不需要转译。

这样做的好处是包更小，并且在开发过程中周转时间要快得多。

现在我们要开始使用stage 4 optional chaining feature 其中can be enabled in Chrome using a flag。

我试过用谷歌搜索这个，我只能找到babel has a plugin for this。

问题：有什么办法可以让 webpack 接受这种语法同时省略 babel？

这是 webpack 当前报告的内容：

ERROR in ./src/js/components/custom-select.js 245:12
Module parse failed: Unexpected token (245:12)
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
|      */
|     focus() {
>         this.input?.focus();
|         return this;
|     }
 @ ./src/js/components/components.js 16:0-49 16:0-49

Answer 1

Webpack 4 本身并不支持可选链接，但是 Webpack 5 已经支持它，所以如果可能的话，最好的做法是upgrade to Webpack 5。

否则，如果您无法更新到 Webpack 5，则应使用 Babel (@babel/plugin-proposal-optional-chaining) 或 TypeScript 编译器（target 最多 ES2019）进行可选的链式编译。

Answer 2

根据this similar issue，webpack 依赖于解析器Acorn，因此可能需要 Acorn 首先支持可选链。 Acorn 有一个开放的拉取请求 here 用于可选链接，但与此同时，用户在第一个问题中建议的“解决方案”是禁用解析您需要使用 module.noParse 的可选文件，直到 Acorn并且 webpack 支持该功能。

更新： 自 v7.3.0 起，Acorn 现已支持可选链接，根据 this webpack issue comment，听起来他们不希望 webpack 在 webpack 5 发布之前支持它。可以跟踪到 webpack 5 的进度here。

Answer 3

关于@Klaycon 的回答，Acorn 今天发布了一个支持可选链接的new version。 一旦 Webpack 反映了他们的变化——使用 webpack 的可选链接应该不再是问题了。