Настройка кода во время сборки в React Native с помощью приложений и приложений Create React Native - PullRequest
Новая
       50

Настройка кода во время сборки в React Native с помощью приложений и приложений Create React Native

0 голосов
/ 08 июня 2018

Как правило, есть ли способ настроить код приложения на этапе сборки?

В частности, существует типичная необходимость делать запросы от приложения к локальному бэкэнду ( [1] , [2] , [3] , [4] ).

  • localhost не работает ссервер и приложение находятся на разных хостах (при использовании эмулятора Android или реального физического устройства).
  • Фактический IP-адрес хоста в той же сети работает, но в проекте с несколькими разработчиками это хлопотно длячтобы каждый мог постоянно менять постоянный IP-адрес в коде на свой компьютер-разработчик.

С помощью Webpack подобный случай можно решить с помощью DefinePlugin , заменив заполнитель на IP-адресмашины, на которой происходит сборка.

1 Ответ

0 голосов
/ 12 августа 2018

В итоге мы использовали несколько хакерский подход, вдохновленный такими трансформаторами, как react-native-typescript-transformer или react-native-sass-transformer.Эта идея в значительной степени эквивалентна упомянутому DefinePlugin Webpack.

Во-первых, некоторые файлы-трансформеры в каталоге проекта (вы можете называть их по своему усмотрению, просто обновите ссылки):

configBuildReplacements.js 

// whatever logic you need

module.exports = {
    API_HOST_PLACEHOLDER: `http://${getLocalNetworkAddress()}:3000`,
    SOME_OTHER_DYNAMIC_VALUE: someFun(),
}

configBuildReplaceTransformer.js 

const semver = require('semver')    

let upstreamTransformer = null

const reactNativeVersionString = require('react-native/package.json').version
const reactNativeMinorVersion = semver(reactNativeVersionString).minor

if (reactNativeMinorVersion >= 56) {
    upstreamTransformer = require('metro/src/reactNativeTransformer')
}
else if (reactNativeMinorVersion >= 52) {
    upstreamTransformer = require('metro/src/transformer')
}
else if (reactNativeMinorVersion >= 47) {
    upstreamTransformer = require('metro-bundler/src/transformer')
}
else if (reactNativeMinorVersion === 46) {
    upstreamTransformer = require('metro-bundler/build/transformer')
}
else {
    // handle RN <= 0.45
    const oldUpstreamTransformer = require('react-native/packager/transformer')
    upstreamTransformer = {
        transform({ src, filename, options }) {
            return oldUpstreamTransformer.transform(src, filename, options)
        },
    }
}


module.exports.transform = function (src, filename, options) {
    // handle RN >= 0.46
    if (typeof src === 'object') {
        ({ src, filename, options } = src)
    }

    const replacements = require('./configBuildReplacements')

    const modifiedSrc = Object.keys(replacements).reduce(
        (src, replacementKey) => src.replace(
            new RegExp(replacementKey, 'g'),
            replacements[replacementKey],
        ),
        src,
    )

    return upstreamTransformer.transform({
        src: modifiedSrc,
        filename,
        options,
    })
}

Экспортированная transform функция используетэкспортируемый объект из предыдущего файла configBuildReplacements.js в качестве словаря для замены ключевых подстрок на значения подстрок в исходном коде перед передачей этого кода преобразователю по умолчанию (восходящий).

И для подключения этого нового преобразователя кпроект:

  • с Expo, добавьте опцию transformer упаковщика к app.json: 

    {
  "expo": {
    "packagerOpts": {
      "transformer": "configBuildReplaceTransformer.js"
    }
  }
}

  • без Expo, добавьте getTransformModulePath() до rn-cli.config.js (это путь по умолчанию к необязательному файлу конфигурации для React Native CLI, который крайне плохо документирован на момент написания этой статьи): 

    module.exports = {
    getTransformModulePath() {
        return require.resolve('./configBuildReplaceTransformer')
    },        
}

Послеэто сделано, так же, как With DefinePlugin, код типа 

get('API_HOST_PLACEHOLDER/info')

станет чем-то вроде 

get('http://192.168.42.23:3000/info')
...