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

Question

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

Tip: the main entry point of the MobX 5 package ships with ES5 code for backward compatibility with all build tools. But since MobX 5 runs only on modern browsers anyway, consider using the faster and smaller ES6 build: lib/mobx.es6.js. For example by setting up a webpack alias: 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，但这里有提示：

resolverMainFields

Type: Array<string>

Specify the fields in package.json files that will be used by the module resolver to do redirections when requiring certain packages. For example, using ['browser', 'main'] will use the browser field if it exists and will default to main if it doesn't.

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

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

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

Use optimized es6 build of MobX for React Native in Metro config

react-native

mobx

metro-bundler