如何让 webpack 在没有 babel 的情况下接受可选链接

Question

设想：

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

这样做的好处是包更小，开发时的周转时间要快得多。

现在我们要开始使用第4 阶段的可选链接功能，该功能可以在 Chrome 中使用标志启用。

我试着用谷歌搜索这个，我能找到的只是babel 有一个插件。

问题：有什么方法可以让 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 依赖于解析器Acorn ，因此大概需要 Acorn 首先支持可选链接。 Acorn在这里有一个用于可选链接的开放拉取请求，但与此同时，用户在第一个问题中建议的“解决方案”是禁用解析您需要可选的文件，使用module.noParse直到 Acorn 和 webpack支持该功能。

更新：可选链接现在支持在橡子为V7.3.0 ，并根据此的WebPack问题的评论，这听起来像他们不希望的WebPack支持它，直到5个的WebPack版本。 可以在此处跟踪 webpack 5 的进度。

Answer 2

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

Answer 3

有可能单独的 Webpack 4 不支持可选链，但是，它已经在 Webpack 5 中得到支持，所以如果可能的话，最好的做法是升级到 Webpack 5 。

否则，如果您不能更新到的WebPack 5，你应该使用巴贝尔（ @通天塔/插件，建议，可选链式）或打字稿编译器（ target最多ES2019可选链接transpilation）。