如何构建无代码压缩的Ionic React开发模式构建产物

问题现象 #

• 直接执行ionic build时，构建流程默认携带--production标识，输出的JS/TS代码会被压缩混淆，不适合调试
• Vue项目下可正常生效的ionic build -- --mode development传参方式，在Ionic React场景下无效
• 命令执行输出参考：
  

解决方法 #

Ionic React 底层基于Create React App封装，Ionic CLI对React项目的构建参数做了默认生产模式配置，透传参数的逻辑和Vue版本不一致，按以下任意一种方式操作即可生成可调试的开发构建产物：

• 直接调用react-scripts执行构建，绕过Ionic CLI的默认配置

  npx react-scripts build
  

  该命令默认不会开启代码压缩、混淆，会生成完整的sourcemap，满足调试需求。
• 若需要显式指定开发环境变量，可在执行时注入NODE_ENV参数：
  • Mac/Linux终端：

    NODE_ENV=development npx react-scripts build
    

  • Windows CMD终端：

    set NODE_ENV=development&&npx react-scripts build
    

• 若要保留ionic命令的使用习惯，可直接修改项目package.json中的scripts配置，新增开发构建命令：

  {
    "scripts": {
      "build:dev": "NODE_ENV=development react-scripts build"
    }
  }
  

  后续需要调试构建时，直接执行npm run build:dev即可。

注意：Ionic CLI对React项目的参数透传逻辑和Vue项目不同，不要尝试给ionic build追加自定义mode参数，这类参数不会被底层的react-scripts识别，最终还是会触发默认的生产构建流程。

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