2017-02-13 4 views
10

Я использую плагин babel для загрузки переменных среды из файла .env в проект React Native, но изменения в файле .env не загружаются до импорта файла javascript. они меняются. Мне бы хотелось, чтобы рекомпилятор реагировал на собственный пакет, чтобы этот файл изменился. Я бы принял ответ, что:Скачайте native-native packager для просмотра файла, отличного от javascript

  1. Просто повторно транслирует весь проект, когда изменяется конкретный файл (.env).
  2. Re-transpiles только те файлы, содержащие определенную строку, скажем foo

Есть простой способ сделать это, написав плагин/промежуточное программное обеспечение? Может быть, отдельный фоновый скрипт, который вызывает события для сторожа, которого слушает реагирующий навстречу упаковщик?

[EDIT в ответ на комментарий]

Мой текущий .babelrc является следующее, где babel-plugin-react-native-config это плагин, который я написал, чтобы сделать горячую переменную замену в сочетании с react-native-config пакетом.

{ 
    "presets": [ 
    "react-native" 
    ], 
    "plugins": [ 
    ["babel-plugin-espower", { 
     "sourceRoot": "./App" 
    }], 
    "transform-flow-strip-types" 
    ], 
    "env": { 
    "production": { 
     "plugins": [ 
     "babel-plugin-unassert", 
     ] 
    }, 
    "development": { 
     "plugins": [ 
     ["babel-plugin-react-native-config", { envfile: ".env" }] 
     ] 
    } 
    } 
} 

Проблема в том, что реактивный нативный упаковщик просматривает только файлы javascript. Я не думаю, что изменение моей конфигурации столпотворение поможет, если столпотворение не может каким-то говорить вверх реагировать родной или сторож, чтобы сообщить ему, что какой-то файл нужно перекомпилировать ...

[EDIT 2]

Я определил, что реактор-нативный упаковщик использует сторожа для просмотра файлов. Например, когда я watchman watch-list после запуска упаковщика (и после выполнения watchman watch-del-all), я получаю

{ 
    "version": "4.6.0", 
    "roots": [ 
     "/path/to/my/project" 
    ] 
} 

Более того, когда я удалить эти часы в то время как упаковщик работает, ничего не происходит (с его точки зрения, JS ISN 't меняется, потому что он не получает никаких обновлений), но затем, когда я перезапускаю упаковщик, он воссоздает эти часы и перетаскивает все.

Так что, если есть лучший способ, я должен создать триггер сторожа для обоих (1) убить реактивного упаковщика (2) убить часы в моем каталоге приложений (3) перезапустить узел-узел. Это кажется медленным и взломанным, но я хотел бы видеть, может ли он даже работать.

Я не совсем понял это, чтобы работать в общем виде, но я экспериментирую с различными вещами.

+0

Можете ли вы предоставить более подробную информацию о вашей текущей настройке Babel? Спасибо –

+0

@ Sébastien обновлен с вашими запрошенными деталями. – JeremyKun

+0

Пожалуйста, проверьте, может ли эта нить помочь вам любым способом! https://github.com/mjohnston/react-native-webpack-server/issues/63 – arunprakashpj

ответ

2

Поскольку прошло уже две недели с тех пор, как я задал этот вопрос, я собираюсь опубликовать (ужасное) обходное решение, которое я смог собрать. Я оставлю этот вопрос без ответа и приму любой новый ответ, который лучше (менее хакерский), чем этот.

Реактивный родной пакетщик использует watchman для просмотра изменений в файловой системе, и после получения события, которое изменил какой-либо JS-файл, он видит, действительно ли файл был изменен, а затем ретранслирует, если это так. Это мешает мне делать что-то простое, как сторожевой триггер, который соответствует соответствующему JS-файлу, потому что реактивный упаковщик считает его настолько умным, что он может игнорировать обновления без diff. Без разницы.

Так что мое решение создать триггер сторожа на .env изменений, которые вызывают make clear_env_cache, где clear_env_cache является следующее (фальшивой) целью в Makefile.

# get the PID of the react packager 
pid := $(shell lsof -i:8081 | grep node | awk '{print $$2;}' | head -n 1) 

# Kill files that the packager uses to determine whether it needs to 
# re-transpile a js file, then restart the packager 
clear_env_cache: 
    find ${TMPDIR}/react-native-packager-cache-* -name "my_pattern" | xargs rm 
    kill -9 $(pid) || echo "no packager running" 
    nohup node node_modules/react-native/local-cli/cli.js start > /dev/null 2>&1 & 

Обратите внимание, что my_pattern будет меняться в зависимости от макета проекта. Для меня есть один файл, импортирующий все envvars под названием Settings.js, поэтому шаблон "*Settings*". Обратите внимание, что эта цель также в основном убивает и перезагружает упаковщик каждый раз, когда файл изменяется, и nohup s узел-узел, чтобы вы больше не могли видеть этот процесс. Не большое дело, если вам не нужно просматривать выходные данные упаковщика.

Сторож-кли команда для запуска это watchman-make --root . -p .env -t clear_env_cache и для удобства я создал цель сделать это nohups эта команда:

# Run `make hotswap_env` to allow envvar changes to show up in the react-native packager. 
hotswap_env: 
    nohup watchman-make --root . -p .env -t clear_env_cache > /dev/null 2>&1 & 

Теперь я могу (один раз в системе загрузки) запуска make hotswap_env и она будет срабатывать когда .env изменяет и обеспечивает бесперебойную работу сервера-упаковщика.

Отказ от ответственности: Этот сценарий, вероятно, не является переносным и определенно хрупким. Caveat emptor и YMMV и IANAL и все такое. Предлагаемые улучшения переносимости приветствуются.

Смежные вопросы