将MobX的优化es6构建用于Metro配置中的React Native

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，我可以这样在extraNodeModules中指定metro.config.js：

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

解决方案是将browser部分添加到package.json：

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

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

resolverMainFields

类型：Array<string>

在package.json文件中指定字段，当需要某些软件包时，模块解析程序将使用该字段进行重定向。例如，使用['browser'，'main']将使用浏览器字段（如果存在），如果没有则默认使用main。

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

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