如何调试 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=* webpack [-c webpack.something.js]

希望能帮助到你