BABEL_ENV=development下babel-loader解析@superset-ui/embedded-sdk失败求助

问题根源在于@superset-ui/embedded-sdk的代码使用了ES2020的可选链操作符（?.），你的开发环境Babel配置未对该语法做转译处理，而生产环境配置包含了对应的转译规则，因此切换BABEL_ENV=production后能正常编译。以下是具体解决步骤：

1. 完善Babel配置 #

检查你的Babel配置文件（如.babelrc、babel.config.js），确保开发环境启用@babel/preset-env并正确配置目标环境：

// babel.config.js 示例
module.exports = {
  presets: [
    '@babel/preset-react',
    ['@babel/preset-env', {
      targets: {
        browsers: ['last 2 versions', 'not dead']
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

若采用分环境配置：

module.exports = {
  env: {
    development: {
      presets: [
        '@babel/preset-react',
        ['@babel/preset-env', {
          targets: 'last 2 versions, not dead',
          useBuiltIns: 'usage',
          corejs: 3
        }]
      ]
    },
    production: {
      // 保留原有生产环境配置
    }
  }
};

2. 安装必要依赖 #

确保已安装Babel转译所需的核心依赖：

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader core-js@3

3. 修改Webpack配置，让Babel处理SDK代码 #

默认Webpack会跳过node_modules目录的转译，但该SDK的代码未完全转译为兼容低版本的ES语法，需让babel-loader处理它：

// webpack.config.js 示例
module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 排除node_modules中除@superset-ui/embedded-sdk外的其他包
        exclude: /node_modules\/(?!@superset-ui\/embedded-sdk)/,
        use: 'babel-loader'
      }
    ]
  }
};

4. 验证开发环境脚本 #

确保package.json中的开发脚本正确设置BABEL_ENV=development，并加载对应的Babel配置：

{
  "scripts": {
    "start": "BABEL_ENV=development webpack serve --mode development"
  }
}

内容的提问来源于stack exchange，提问作者Adjit