如何调试babel.js

ldioqlga 于 2023-10-14 发布在 Babel

关注(0)|答案(2)|浏览(194)

我注意到，几乎没有来自babel的关于错误配置的信息。例如，我用react-native-cli创建了一个新的应用程序，安装了decorators插件，并如下所示填充了我的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得到一些关于不正确的配置/找不到软件包等的诊断？

babeljs

来源：https://stackoverflow.com/questions/58227768/how-to-debug-babel-config-js

2条答案

按热度按时间

gpfsuwkq1#

例如，如果插件/插件丢失或配置错误，当webpack接管并尝试加载所有配置时，您将收到错误。但我认为你最好的办法是使用progressPlugin，在那里你可以显示每一步，亲眼看看发生了什么。

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

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

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

希望它能帮助

赞(0）回复(0）举报 2023-10-14

cgfeq70w2#

如果你使用babel.config.js，你可以这样做：

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

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

赞(0）回复(0）举报 2023-10-14

我来回答

如何调试babel.js

2条答案

相关问题

热门标签

最新问答