错误：缓存未配置。当我将 Font Awesome 安装到我的 React 应用程序时，Babel 的插件

Question

我想在我的 React 应用程序中使用 Font Awesome，但是当我安装了 Font Awesome 的 npm 时，我遇到了这个错误：

Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
  for various types of caching, using the first param of their handler functions:
  module.exports = function(api) {
    // The API exposes the following:
    // Cache the returned value forever and don't call this function again.
    api.cache(true);
    // Don't cache at all. Not recommended because it will be very slow.
    api.cache(false);
    // Cached based on the value of some function. If this function returns a value different from
    // a previously-encountered value, the plugins will re-evaluate.
    var env = api.cache(() => process.env.NODE_ENV);
    // If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
    // any possible NODE_ENV value that might come up during plugin execution.
    var isProd = api.cache(() => process.env.NODE_ENV === "production");
    // .cache(fn) will perform a linear search though instances to find the matching plugin based
    // based on previous instantiated plugins. If you want to recreate the plugin and discard the
    // previous instance whenever something changes, you may use:
    var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
    // Note, we also expose the following more-verbose versions of the above examples:
    api.cache.forever(); // api.cache(true)
    api.cache.never();   // api.cache(false)
    api.cache.using(fn); // api.cache(fn)
    // Return the value that will be cached.
    return { };
  };

这是我的开发依赖项：

"devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "webpack": "^5.70.0"
  }

我创建了 2 个新文件，如教程中所示 babel.config.js：

module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

和 babel-plugin-macros.config.js:

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

但我仍然有这个错误

Answer 1

为了修复这个错误，我编写了一个小 babel.config.js：

module.exports = function (api) {
    api.cache(true);
    return {
      plugins: ['macros'],
    }
  }

Answer 2

对我来说最简单的方法是将 babel 配置的格式从 babel.config.js 更改为 .babelrc。之后我没有看到任何此类错误。 请前往此处获取更多说明。

Answer 3

我遇到了同样的问题，添加

api.cache(true)

行对我不起作用（这里也没有发布任何建议），所以我清理了 babel 缓存

rm -rf node_modules/.cache/babel-loader/ 

，问题就消失了。

Answer 4

1. 按F1
2. 转到settings.json
3. 设置“json.schemaDownload.enable”：true
4. 重新加载 VSCode