如何调试babel.config.js

Question

我注意到，实际上babel没有提供有关错误配置的信息。例如，我使用react-native-cli创建了新应用，安装了装饰器插件，并按如下所示填充了babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@babel/plugin-proposal-decorators', { legacy: true }],
};

并且有同样的抱怨，好像没有安装任何插件。正确的配置为：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
};

现在我正在尝试安装jsx-control-statements，并且由于同样的原因导致失败ReferenceError: Can't find variable: Choose，好像根本没有安装这样的插件。我的babel.config.js是：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'jsx-control-statements',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
  ],
};

所以问题是：如何调试此配置？如何从babel得到一些有关配置错误/未找到软件包等的诊断？

Answer 1

例如，如果您使用的是表示babel.config.js的js版本，则可以执行以下操作：

module.exports = function(api) {
  if (api) {
    api.cache(true);
    api.debug = process.env.NODE_ENV === 'devolepment' || false;
  }

  const presets = ['@babel/preset-env'];
  const plugins = [
    '@babel/plugin-proposal-class-properties',
    ...
  ];
 
  return {
    presets,
    plugins,
  };
};

Answer 2

例如，如果缺少预设/插件或配置错误，则当webpack接管并尝试加载所有配置时，您会收到一条错误消息。但是我认为您最好的选择是使用progressPlugin，在那里您可以显示每个步骤并亲自查看发生了什么。

new webpack.ProgressPlugin((percentage, message, ...args) => {
    console.log(percentage, message, ...args);
  }),

另一种方法是使用debug模块，因为几乎所有其他插件模块都使用它。

DEBUG=* webpack [-c webpack.something.js]

希望有帮助