如何为世博会分发包裹? (.web.js,.js配置)
How to distribute package for expo? (.web.js, .js configuration)
我想为世博会分发包裹。这个包是在 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
字段一起工作,我已经用 :
重新配置了我的 repo
/home/dka/workspace/github.com/yeutech-lab/react-cookiebot/src
├── CookieBot.js
├── CookieBot.native.js
└── index.js
问题:
- 我已经使用了
.native.js
所以我的 reactjs 用户(不仅是 expo 和 react-native 用户)将默认导入 .js
文件
- 由于 (1),其他 React 用户(既不是 react-native 也不是 expo)不需要某种额外的配置来支持 react-native 扩展
.web.js
、.ios.js
、.android.is
、.native.js
和 .js
.
- 如果我更喜欢
.web.js
而不是 (1),我的 React 用户将不可能像 ( 2),在这种情况下:他们在项目中配置 react-native 扩展的方式是什么?
- 对于所有 react-native 用户,我可以知道在本地项目中可以在哪里配置扩展吗?(我相信 web 项目可以在 webpack 中配置
config.resolve.extensions
)
关于主场
在节点模块中,您可以通过删除 package.json
.
中的文件扩展名,使捆绑器解析特定于平台的 "main" 文件
- "main": "index.js"
+ "main": "index"
我建议不要这样做,因为捆绑器解析在 Webpack 和 Metro 以外的捆绑器中可能会有所不同。让一个 "main" 文件重新导出其他平台特定模块的内容会更安全(看起来这是你在编辑中所做的,但为了完整性我会在这里留下解释):
index.js
export * from './module';
module.js
香草 JS
module.web.js
用于网络的 React Native
module.native.js
React Native
- In case I do prefer
.web.js
instead of (1), it will not be possible for my react user to do as in (2), and in this case: what would be the way for them to configure react-native extensions in their project?
重要的是要记住,即使项目不是 React Native web 项目,.web.js
仍然可以解决。 Create React App 为每个项目解析 .web.js
扩展。
在网络上,用户可以通过修改 Webpack 配置的 config.resolve.extensions
字段来配置他们的平台扩展。在 Expo 中,这可以通过 运行 expo customize:web
.
来完成
- Configure native extensions
这可以通过编辑项目的 Metro 配置来完成:Example。
我想为世博会分发包裹。这个包是在 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
问题:
- 我已经使用了
.native.js
所以我的 reactjs 用户(不仅是 expo 和 react-native 用户)将默认导入.js
文件 - 由于 (1),其他 React 用户(既不是 react-native 也不是 expo)不需要某种额外的配置来支持 react-native 扩展
.web.js
、.ios.js
、.android.is
、.native.js
和.js
. - 如果我更喜欢
.web.js
而不是 (1),我的 React 用户将不可能像 ( 2),在这种情况下:他们在项目中配置 react-native 扩展的方式是什么? - 对于所有 react-native 用户,我可以知道在本地项目中可以在哪里配置扩展吗?(我相信 web 项目可以在 webpack 中配置
config.resolve.extensions
)
关于主场
在节点模块中,您可以通过删除 package.json
.
- "main": "index.js"
+ "main": "index"
我建议不要这样做,因为捆绑器解析在 Webpack 和 Metro 以外的捆绑器中可能会有所不同。让一个 "main" 文件重新导出其他平台特定模块的内容会更安全(看起来这是你在编辑中所做的,但为了完整性我会在这里留下解释):
index.js
export * from './module';
module.js
香草 JSmodule.web.js
用于网络的 React Nativemodule.native.js
React Native
- In case I do prefer
.web.js
instead of (1), it will not be possible for my react user to do as in (2), and in this case: what would be the way for them to configure react-native extensions in their project?
重要的是要记住,即使项目不是 React Native web 项目,.web.js
仍然可以解决。 Create React App 为每个项目解析 .web.js
扩展。
在网络上,用户可以通过修改 Webpack 配置的 config.resolve.extensions
字段来配置他们的平台扩展。在 Expo 中,这可以通过 运行 expo customize:web
.
- Configure native extensions
这可以通过编辑项目的 Metro 配置来完成:Example。