javascript - 如何使 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

根据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 .