告诉react-native打包者观看一个非javascript文件

我正在使用babel插件将.env文件中的环境variables加载到React Native项目中,但直到导入它们的JavaScript文件发生变化时才会加载对.env文件的更改。 我想要一个方法告诉react-native打包器在这个文件改变的情况下重新编译。 我会接受一个答案:

  1. 当特定文件( .env )发生更改时,只需重新编译整个项目.env
  2. 只重新编译包含特定string的文件,如foo

有一个简单的方法来做到这一点,通过编写一个插件/中间件? 也许是一个单独的后台脚本,引发反应 – 本机打包者正在监听的事件给看守?

[编辑在回复评论]

我目前的.babelrc如下,其中babel-plugin-react-native-config是我写的一个插件,用于与react-native-config软件包一起执行热variables交换。

 { "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" }] ] } } } 

问题是react-native打包程序只能看javascript文件。 我不认为改变我的babelconfiguration将有所帮助,除非babel可以以某种方式向上说出反应 – 本地或守望者通知它,某些文件需要重新编译…

[编辑2]

我确定,反应原生包装商使用守望者来观看文件。 例如,当我开始打包者(做一名watchman watch-del-all之后)做watchman watch-del-all ,我得到

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

而且,当我在包装机运行的时候删除这个手表的时候,什么都没有发生(从它的angular度来看,因为它没有收到任何更新,所以js不会改变),但是当我重新启动包装机时,它会重新创build这个手表, 。

所以看来,除非有更好的方法,否则我必须创build一个监视员触发器,以便(1)杀死react-packager(2)杀死我的app目录上的监视器(3)重新启动节点包装器。 这看起来很慢而且很冒险,但是我想看看它是否可以工作。

我还没有得到这个以通用的方式工作,但我正在尝试各种事情。

自从我提出这个问题已经两个星期了,我将会发布我可以拼凑在一起的(可怕的)解决方法。 我将不回答这个问题,并接受任何比这个更好的(比较不好的)新的答案。

反应的本地包装器使用watchman来监视文件系统的变化,并且一旦得到一个事件,一些JS文件已经改变,它会查看文件是否真的发生了变化,然后重新编译。 这可以防止我做一些简单的事情,比如触发相关JS文件的监视器触发器,因为反应包装器认为它非常聪明,可以忽略没有差异的更新。 随你。

所以我的解决scheme是在.env上创build一个.env触发器, .env更改哪个调用make clear_env_cache ,其中clear_env_cacheMakefile的以下(假)目标。

 # 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会根据您的项目布局而改变。 对于我来说,有一个文件导入所有名为Settings.js ,所以模式是"*Settings*" 。 注意这个目标也基本上在每次文件改变的时候杀死和重新启动打包程序,而nohup是节点打包程序,所以你将不能再看到这个进程。 除非您需要查看打包程序的输出,否则没什么大不了的。

watchman-cli命令来触发这个是watchman-make --root . -p .env -t clear_env_cache watchman-make --root . -p .env -t clear_env_cache ,为了方便起见,我设置了一个make目标,

 # 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更改时都会触发,并确保包装服务器连续运行。

免责声明:这个脚本可能不是可移植的,而且绝对是脆弱的。 警戒和YMMV和IANAL和所有这一切。 build议改善便携性是值得欢迎的。