react-native - 如何调试 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

例如，如果预设/插件丢失或配置错误，当 webpack 接管并尝试加载所有配置时，您将收到错误消息。但我认为你最好的办法是使用progressPlugin，你可以在其中显示每个步骤并亲自查看正在发生的事情。

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

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

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

希望能帮助到你