Webpack 不支持 `import.meta`，利用 ESM 在浏览器里使用 yargs

前些天遇到一个需求：解析 curl 请求，并转换成 ajax 请求由浏览器发出去。

我觉得这个需求听起来不算稀罕，理论上应该有现成的库。于是在 npm 找了一下，发现 curlconverter 似乎可以满足需求。但是使用的时候报错：Module parse failed: Unexpected token。

这个错误很奇怪，看起来像是 loader 没配好。打开报错的文件位置，怎么看语法都没问题。尝试修改 webpack 配置，也未果。因为项目是 vue-cli 创建的，在如何查看最终配置上也浪费很多时间。

最后继续诉诸 Google，关键词换来换去，终于在搜索 mjs Module parse failed: Unexpected token 时找到这个 issue：https://github.com/arnog/mathlive/issues/525，继而找到 https://github.com/webpack/webpack/issues/6719，终于确定，这是 webpack 的问题。

因为 webpack 不支持 import.meta，所以会把 import.meta 当成语法错报告。我觉得这个行为很扯，因为 loader 配错也会报这个，所以对于第一次接触到这个问题的开发者（比如我）而言，会浪费大量时间在那些初级错误的搜索结果里。

接下来解决问题。

curlconverter 虽然不能直接使用，但仔细阅读它的代码，其中 https://github.com/NickCarneiro/curlconverter/blob/master/util.js 解析 curl 命令的功能实现应该问题不大，我只要想办法把 yargs 加载进来即可。而 yargs 支持浏览器 ESM 加载，所以我在页面里添加了 <script type="module" src="./yargs.js">，使用如下代码：

// 虽然 yargs 已经到 16.2，但是 16.0.4 之后的版本都有问题
import Yargs from 'https://unpkg.com/yargs@16.0.3/browser.mjs';

// 加载完成 yargs 之后，把它挂载到 window 上
window.Yargs = Yargs;

将 yargs 挂到 window 上，成为外部库。然后在 vue.config.js 里配置 externals：

module.exports = {
  chainWebpack: config => {
    config.externals.yargs = 'commonjs Yargs';
  }
}

接下来，将前面说的 utils.js 复制到本地并修改其中 parseCurlCommand 的实现，最终完成了需求。

---

总结一下：

1. 使用 yargs 解析命令行请求比较方便，远比自己写方便
2. yargs 无法配合 webpack，据说可以配合 rollup 或者 snowpack，在我的 vue-cli 项目中，需要使用一些特殊的手段加载
3. curlconverter 也很好用，可惜不能直接用