Webpack打包Ledger React Native BLE模块报Unexpected token错误如何解决

错误根因 #

你遇到的报错核心原因有两个：

1. 你的webpack配置默认排除了所有node_modules下的文件经过babel处理，而依赖项react-native-ble-plx使用了Flow语法的export type非标准ES语法，webpack原生无法识别，也没有被loader转译。
2. 项目根目录下的.babelrc属于局部配置，仅对项目自身源码生效，不会作用于node_modules下的第三方依赖，哪怕你放开了exclude规则，配置也不会生效。

解决方案 #

• 第一步：调整webpack的babel-loader排除规则，放开对react-native-ble-plx的处理限制
  修改webpack.config.js中的module.rules的js处理规则：

{
  test: /\.(js|jsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        "@babel/preset-env",
        "@babel/preset-flow"
      ],
      plugins: [
        "@babel/plugin-transform-flow-strip-types"
      ]
    }
  },
  // 仅排除react-native-ble-plx以外的node_modules依赖
  exclude: (path) => /node_modules/.test(path) && !/node_modules\/react-native-ble-plx/.test(path)
}

不需要处理react语法的话可以直接删掉@babel/preset-react预设，减少冗余代码。原来的.babelrc文件可以直接删除，配置已经内置到loader参数中，会对所有匹配的文件生效。

• 第二步：补充必要的依赖安装
  执行以下命令安装Flow语法转译的插件：
  npm install @babel/plugin-transform-flow-strip-types --save-dev

• 第三步：适配JavascriptContext运行环境
  react-native-ble-plx本身依赖ReactNative原生提供的BLE能力接口，打包出来的JS文件直接在JavascriptContext中运行时会找不到对应的原生模块，你需要在JSContext中全局注入桩实现，把所有BLE相关的调用（比如设备扫描、连接、特征值读写等）转发到你Swift侧的CoreBluetooth能力实现，才能完成完整的功能对接。

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