时间戳

首页 > 解决方案 > 世博会如何分发包裹？（.web.js、.js 配置）

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

问题描述

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

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

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

作为一个例子，这个包应该与 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？

编辑

我期望我的扩展与我的main领域一起工作是错误的package.json，我已经重新配置了我的回购：

/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-native 也不是 expo）不需要某种额外的配置来支持 react-native扩展.web.js、.ios.js、.android.is和。.native.js.js
  3. 如果我确实更喜欢(1)，我的 react 用户将无法像(2).web.js那样做，在这种情况下：他们在项目中配置 react-native 扩展的方式是什么？
  4. 对于所有 react-native 用户，我可以知道在本地项目中可以配置扩展的位置吗？（我相信可以在 webpack 中配置 web 项目config.resolve.extensions）

标签： javascriptreact-nativewebpackexpometro-bundler

解决方案

关于主要领域

在节点模块中，您可以通过删除package.json.

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

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

index.js

export * from './module';
  • module.js香草JS
  • module.web.js用于 Web 的 React Native
  • module.native.js反应原生
  1. 如果我更喜欢.web.js（1）而不是（1），我的 react 用户将无法像（2）中那样做，在这种情况下：他们在项目中配置 react-native 扩展的方式是什么？

重要的是要记住，.web.js即使项目不是 React Native Web 项目，它仍然可以解决。Create React App.web.js为每个项目解析扩展。

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

  1. 配置本机扩展

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

推荐阅读