20

设想：

  • 我们正在使用 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
4

3 回答 3

7

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

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

于 2020-01-29T17:40:38.930 回答
5

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

于 2020-06-11T10:50:17.277 回答
3

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

否则，如果你不能更新到 Webpack 5，你应该使用 Babel（@babel/plugin-proposal-optional-chaining）或 TypeScript 编译器（target最多ES2019）进行可选链编译。

于 2021-03-01T13:26:46.710 回答