Используйте оптимизированную сборку esb MobX для React Native в конфигурации Metro

Question

Я пытаюсь использовать оптимизированную сборку Mobx es6 согласно документации:

Совет: главная точка входа в пакет MobX 5 поставляется с кодом ES5 для обратной совместимости с все инструменты для сборки. Но поскольку MobX 5 в любом случае работает только в современных браузерах, рассмотрите возможность использования более быстрой и компактной сборки ES6: lib / mobx.es6. js. Например, установив псевдоним веб-пакета: resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}

https://mobx.js.org/README.html#browser -поддержка

Это позволяет мне импортировать mobx и получить mobx.es6.js build:

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.

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>

Укажите поля в пакете. json файлы, которые будут использоваться распознавателем модуля для перенаправления при запросе определенных пакетов. Например, использование ['browser', 'main'] будет использовать поле браузера, если оно существует, и по умолчанию будет использоваться main, если его нет.

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

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