如何开发可根据运行环境Proxy支持情况提供不同实现的NPM JavaScript库

你可以通过以下几种成熟方案实现该需求，Babel确实无法转译Proxy这类底层内置API，不存在可以完全等价替代Proxy的ES5语法，因此必须通过多实现分支的思路解决。

该方案无需用户额外配置，开箱即用：

• 先实现可靠的Proxy支持检测逻辑，注意要同时检测Proxy和配套的Reflect API，避免部分环境存在残缺实现：

  const isProxySupported = typeof Proxy === 'function' && typeof Reflect === 'function' && Reflect.get !== undefined
  

• 将两套实现拆分为独立文件，在入口文件中根据检测结果导出对应实现：

  import ProxyImpl from './impl/proxy.js'
  import FallbackImpl from './impl/fallback.js'
  
  export default isProxySupported ? ProxyImpl : FallbackImpl
  

• 该方案的劣势是两套代码默认都会被打包进最终产物，对体积敏感的场景可以选择后续方案。

该方案适合对体积有要求的用户，可以按需引入对应版本：

• 在package.json的exports字段中声明多个入口，分别对应默认自动检测版、仅Proxy版、仅降级版：

  {
    "name": "your-lib-name",
    "exports": {
      ".": {
        "default": "./dist/index.js"
      },
      "./proxy": "./dist/proxy-only.js",
      "./fallback": "./dist/fallback-only.js"
    }
  }
  

• 用户可以根据自己项目的目标环境手动选择入口，比如确定需要兼容IE11的项目直接引入your-lib/fallback，不需要兼容旧环境的项目引入your-lib/proxy，不会引入冗余代码。

该方案可以配合用户项目的构建流程自动移除无用代码：

• 在代码中加入环境变量判断分支，配合打包工具的tree shaking能力自动移除不需要的代码：

  let Implementation
  if (process.env.YOUR_LIB_USE_PROXY === 'true') {
    Implementation = require('./impl/proxy.js').default
  } else if (process.env.YOUR_LIB_USE_PROXY === 'false') {
    Implementation = require('./impl/fallback.js').default
  } else {
    // 降级到运行时自动检测
    Implementation = isProxySupported ? require('./impl/proxy.js').default : require('./impl/fallback.js').default
  }
  export default Implementation
  

• 用户构建自己的项目时，只要提前设置对应的环境变量，打包工具就会自动把未命中的分支代码完全移除，不会增加额外体积。

• 不要尝试模拟完整的Proxy特性，目前不存在可以100%兼容Proxy所有能力的ES5实现，仅需要覆盖你的库实际用到的Proxy拦截逻辑即可，比如仅用到get/set拦截就只实现这两个能力
• 要在文档中明确标注降级实现的功能限制，避免用户在旧环境中用到不支持的特性出现预期外的问题

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