世博会如何分发包裹？ （.web.js、.js 配置）

Question

我想为博览会分发一个包。这个包是在 expo SDK36 中构建我的应用程序时创建的。

像许多 expo 依赖项一样，我大量使用 .ios.js、.android.js 和 .web.js 扩展。

在导入我在 npm 上分发的源时，解析器只导入 .js，没有任何区别。

例如 this package 应该与 expo 一起使用：

这是@expo/webpack-config 解析的扩展：

[
  ".web.expo.ts",
  ".web.expo.tsx",
  ".web.expo.mjs",
  ".web.expo.js",
  ".web.expo.jsx",
  ".expo.ts",
  ".expo.tsx",
  ".expo.mjs",
  ".expo.js",
  ".expo.jsx",
  ".web.ts",
  ".web.tsx",
  ".web.mjs",
  ".web.js",
  ".web.jsx",
  ".ts",
  ".tsx",
  ".mjs",
  ".js",
  ".jsx",
  ".json",
  ".wasm"
]

但它没有，我必须通过在源代码中添加.web 后缀来手动导入。

如何配置expo 或我的分布式包，以便在从node_modules 导入源时能够为每个环境导入正确的源？

编辑

我错误地期望我的扩展程序可以与我的 package.json 的 main 字段一起使用，我已经重新配置了我的存储库：

/home/dka/workspace/github.com/yeutech-lab/react-cookiebot/src
├── CookieBot.js
├── CookieBot.native.js
└── index.js

问题：

1. 我使用了.native.js，所以我的reactjs 用户（不仅是expo 和react-native 用户）将默认导入.js 文件
2. 由于 (1)，其他 react 用户（既不是 react-native 也不是 expo）不需要某种额外的配置来支持 react-native 扩展 .web.js, .ios.js, .android.is、.native.js 和 .js。
3. 如果我更喜欢 .web.js 而不是 (1)，我的 react 用户将无法像 (2) 中那样做，并且这个案例：他们在项目中配置 react-native 扩展的方式是什么？
4. 对于所有 react-native 用户，我可以知道在原生项目中可以配置扩展的位置吗？（我相信 web 项目可以使用 config.resolve.extensions 在 webpack 中配置）

Answer 1

关于主要领域

在节点模块中，您可以通过删除 package.json 中的文件扩展名来使捆绑程序解析特定于平台的“主”文件。

 -  "main": "index.js"
 +  "main": "index"

我建议不要这样做，因为捆绑器解析在 Webpack 和 Metro 以外的捆绑器中的工作方式可能不同。让一个“主”文件重新导出其他平台特定模块的内容会更安全（看起来这是您在编辑中所做的，但为了完整起见，我将在此处留下解释）：

index.js

export * from './module';

• module.js香草JS
• module.web.js React Native 网页版
• module.native.js React Native

1. 如果我更喜欢 .web.js 而不是 (1)，我的 react 用户将无法像 (2) 中那样做，在这种情况下：他们配置 react 的方式是什么-项目中的原生扩展？

请务必记住，即使项目不是 React Native Web 项目，.web.js 仍然可以解析。 Create React App 为每个项目解析 .web.js 扩展。

在 Web 上，用户可以通过修改 Webpack 配置的 config.resolve.extensions 字段来配置他们的平台扩展。在 Expo 中，这可以通过运行 expo customize:web 来完成。

4. 配置原生扩展

这可以通过编辑项目的 Metro 配置来完成：Example。