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，在其中可以显示每个步骤并亲自查看发生了什么。

class Polyline {
  const Polyline({
    @required this.polylineId,
    this.consumeTapEvents = false,
    this.color = Colors.black,
    this.endCap = Cap.buttCap,
    this.geodesic = false,
    this.jointType = JointType.mitered,
    this.points = const <LatLng>[],
    this.patterns = const <PatternItem>[],
    this.startCap = Cap.buttCap,
    this.visible = true,
    this.width = 10,
    this.zIndex = 0,
    this.onTap,
  });

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

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

希望有帮助

Answer 2

例如，如果使用表示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,
  };
};

如何调试babel.config.js

2 个答案: