javascript - 如何优雅地处理自定义 Webpack 插件中的错误？

Question

有没有人有关于如何在自定义 Webpack 插件中正确处理错误的提示或信息？

我正在尝试编写一个使用 axios 获取外部数据的插件，然后将其写入 json 文件以供以后在应用程序中使用。到目前为止，这工作正常，但是如果由于某种原因 axios 调用失败，它会导致整个 Webpack 构建崩溃。我不希望 Webpack 构建依赖于这个外部 API 调用，如果它失败了，就跳过这个过程并继续构建。

我曾假设我可以将调用包装在 try-catch 块中，然后通过调用 callback() 函数继续构建，但 Webpack 似乎首先拦截了错误并停止构建。

这是插件代码：

const fs = require('fs');
const path = require('path');
const axios = require('axios');

const url = `https://company.cdn.prismic.io/api/v2/documents/search?ref=YYK3AhAAACEAyRmF&q=[[not(my.blog.unlisted,true)]]&q=[[at(document.type,"blog")]]&orderings=[my.blog.publish_date desc]&pageSize=3`;

const sourceDataFromService = (
  { alreadyGenerateContent, onComplete, logger },
  callback
) => {
  if (!alreadyGenerateContent) {
    logger.info('======== GETTING PRISMIC DATA ========');

    const getPrismicData = async () => {
      // Grab data from prismic
      const response = await axios.get(url);
      logger.info('Blog Data received');
      const { results } = response.data;
      const blogPosts = [];
      results.forEach((result) => {
        blogPosts.push({
          title: result.data.title,
          author: result.data.author,
          publishDate: result.last_publication_date,
          slug: result.uid
        });
      });

      // Write to prismic.json
      fs.writeFile(
        path.resolve(__dirname, './src/prismic.json'),
        JSON.stringify(blogPosts),
        () => {
          logger.info('Blog Data written to prismic.json');
          callback();
        }
      );
    };

    try {
      // Make call to Prismic
      getPrismicData();
    } catch (error) {
      logger.error(error);
      callback();
    }

    onComplete();
  } else {
    callback();
  }
};

class PrismicDataPlugin {
  constructor() {
    this.alreadyGenerateContent = false;
  }

  apply(compiler) {
    compiler.hooks.beforeCompile.tapAsync(
      'PrismicDataPlugin',
      (compilation, callback) => {
        const logger = compilation.getLogger
          ? compilation.getLogger('PrismicDataPlugin')
          : console;

        sourceDataFromService(
          {
            alreadyGenerateContent: this.alreadyGenerateContent,
            onComplete: () => {
              this.alreadyGenerateContent = true;
            },
            logger
          },
          callback
        );
      }
    );
  }
}

module.exports = PrismicDataPlugin;

它在 webpack.config.js 文件中配置如下：

const PrismicDataPlugin = require('./PrismicDataPlugin');
...
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          APP_MODE: JSON.stringify(env.appMode)
        }
      }),
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),
      new PrismicDataPlugin()
    ],
...

任何提示将不胜感激！

标签： javascriptwebpackpluginsaxiostry-catch