如何为第三方包做模块名称别名答案

【问题标题】：How to do module name alias for third party package如何为第三方包做模块名称别名
【发布时间】：2020-01-14 10:30:06
【问题描述】：

我有一个由 react-native init 命令创建的应用程序。我的应用导入 websocket 包，而该包又需要 http 包并导致错误提示“无法解析模块 http”。

即：myApp -> 3rd-module -> ws -> http

我尝试通过安装“@tradle/react-native-http”来解决问题，并将以下行添加到我的应用程序包 json 文件中：

"browser": { "http": "@tradle/react-native-http" }, 
"react-native": { "http": "@tradle/react-native-http" },

但它不起作用。

我也尝试使用 babel-plugin-module-resolver 但也不走运。这是我的 .babelrc ：

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    ["module-resolver", {
      "alias": {
        "@tradle/react-native-http": "http"
      }
    }]
  ]
}

如何为我的案例做别名？我研究通过使用 webpack 配置来解决这个问题，但不知道配置文件在哪里。在google之后，我认为react-native init创建的项目使用metro config而不是webpack。

【问题讨论】：

已验证只需在 package.json 文件中配置“browser”和“react-native”即可。不知道为什么一开始就失败了。现在我的项目在没有配置 .babelrc 、 metro.config.js 或 webpack.config.js 的情况下运行良好。

标签： react-native

【解决方案1】：

试试

    ["module-resolver", {
      "alias": {
        "http":"@tradle/react-native-http"
      }
    }]

【讨论】：