[英]Tell react-native packager to watch a non-javascript file
我正在使用babel插件将环境变量从.env
文件加载到React Native项目中,但是在导入它们的javascript文件发生更改之前,不会加载对.env
文件的更改。 我想要一种方法来告诉react-native packager在这个文件发生变化的情况下重新编译。 我会接受一个答案:
.env
)发生变化时,只需重新编译整个项目。 foo
有没有一种简单的方法来编写插件/中间件? 也许是一个单独的后台脚本,它会向反派原生包装器正在监听的守望者发起事件?
[编辑回复评论]
我现在的.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" }]
]
}
}
}
问题是react-native packager只监视javascript文件。 我不认为改变我的babel配置会有所帮助,除非babel可以某种方式向上反应本地或守望者通知它某些文件需要重新编译...
[编辑2]
我确定react-native packager使用watchman来观看文件。 例如,当我在启动包装工具后(以及在做一个watchman watch-del-all
)做watchman watch-list
,我得到了
{
"version": "4.6.0",
"roots": [
"/path/to/my/project"
]
}
此外,当我在打包器运行时删除这个手表时,没有任何反应(从它的角度来看,js没有改变,因为它没有收到任何更新),但是当我重新启动打包器时它会重新创建这个手表并转换所有内容。
所以看来,除非有更好的方法,否则我必须创建一个守望者触发器(1)杀死react-packager(2)杀死我的app目录上的监视(3)重启节点打包器。 这看起来很慢而且很笨拙,但我想看看它是否能奏效。
我还没有完全按照通用的方式工作,但我正在尝试各种各样的事情。
自从我提出这个问题已经过去两周了,我将发布我能够拼凑的(那种可怕的)解决方法。 我将不回答这个问题,接受任何比这个更好(更少hacky)的新答案。
react native packager使用watchman
来监视文件系统更改,并且在获得某个JS文件已更改的事件时,它会查看文件是否已实际更改,然后重新传输(如果是这样)。 这可以防止我做一些简单的事情,比如touch
相关JS文件的守望者触发器,因为反应包装器认为它非常聪明,它可以忽略没有差异的更新。 随你。
所以我的解决方案是在.env
上创建一个.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
将根据您的项目布局而更改。 对我来说,有一个文件导入所有名为Settings.js
的envvars,因此模式为"*Settings*"
。 请注意,每次文件更改时,此目标基本上也会杀死并重新启动打包程序,并且nohup
是节点打包程序,因此您将无法再看到该进程。 除非您需要查看打包器的输出,否则不是什么大问题。
watchman-cli命令触发它是watchman-make --root . -p .env -t clear_env_cache
watchman-make --root . -p .env -t clear_env_cache
为方便起见,我设置了一个make 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
更改时触发并确保打包服务器持续运行。
免责声明:此脚本可能不可移植,并且绝对是脆弱的。 需要注意的是Emptor和YMMV以及IANAL等等。 我们欢迎建议改进便携性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.