在 Metro 配置中使用 MobX for React Native 的优化 es6 构建

Question

我正在尝试使用Mobx的优化的es6版本，根据文档：

提示：MobX 5 软件包的主入口点附带了 ES5 代码，以便向后兼容所有构建工具。但是由于MobX 5无论如何都只能在现代浏览器上运行，请考虑使用更快，更小的ES6版本：lib/mobx.es6.js。例如，通过设置 webpack 别名：resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}

https://mobx.js.org/README.html#browser-support

这允许我导入mobx并获得mobx.es6.js构建：

import mobx from 'mobx' // Yay, es6 build!!!

这非常适合基于 Webpack 的项目，例如 Electron 项目，我已经在那里工作了。

对于 React Native，我可以在metro.config.js中指定extraNodeModules，如下所示：

module.exports = {
resolver: {
extraNodeModules: {
"mobx": path.resolve(__dirname, 'node_modules/mobx/lib/mobx.es6.js'),
},
},
};

。除了这不起作用，我认为，因为mobx依赖项可以自行解决，因此永远不会选中此配置选项。

我可以为mobx使用单独的别名，例如mobx-es6但这并不理想，说得好听：

module.exports = {
resolver: {
extraNodeModules: {
// Nooo I don't want to update a bazillion source files!.
"mobx-es6": path.resolve(__dirname, 'node_modules/mobx/lib/mobx.es6.js'),
},
},
};

有没有其他方法可以配置 Metro，以便我可以像使用 Webpack 一样覆盖mobx导入？

我使用的是 RN 0.60.0。

Answer 1

解决方案是在package.json中添加一个browser部分：

"name": "My React Native Project",
"version": "0.0.1",
"browser": {
"mobx": "mobx/lib/mobx.es6.js"
},

这是没有记录的，AFAICT，但这里有提示：

解析器主字段

类型：Array<string>

指定 package.json 文件中的字段，模块解析程序将在需要某些包时使用这些字段来执行重定向。例如，使用 ['browser'， 'main'] 将使用浏览器字段(如果存在)，如果不存在，则将默认为 main。

https://facebook.github.io/metro/docs/configuration#resolvermainfields

import mobx from 'mobx' // Yay, es6 build!!!