时间戳

首页 > 解决方案 > 在 Metro 配置中为 React Native 使用优化的 MobX es6 构建

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

问题描述

根据文档，我正在尝试使用 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，以便我可以mobx像使用 Webpack 一样覆盖导入？

我正在使用 RN 0.60.0。

标签： react-nativemobxmetro-bundler

解决方案

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

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

推荐阅读