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

【问题标题】：Use optimized es6 build of MobX for React Native in Metro config在 Metro 配置中为 React Native 使用优化的 MobX es6 构建
【发布时间】：2020-03-25 18:04:09
【问题描述】：

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

提示：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。

【问题讨论】：

标签： react-native mobx metro-bundler

【解决方案1】：

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

    "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!!!

【讨论】：