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

Question

设想：

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

这样做的好处是捆绑包更小，开发时周转时间更快。

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

我试过用谷歌搜索这个，我能找到的只是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

标签： javascriptwebpackoptional-chaining

Answer 1

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

更新：从 v7.3.0 开始，Acorn 现在支持可选链接，根据这个webpack问题评论，听起来他们不希望 webpack 在 webpack 5 发布之前支持它。可以在此处跟踪 webpack 5 的进度。