告诉反应本机包装器来观看非javascript文件

前端之家收集整理的这篇文章主要介绍了告诉反应本机包装器来观看非javascript文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用一个babel插件将.env文件中的环境变量加载到一个React Native项目中,但是直到 javascript文件导入它们发生变化,才会加载.env文件的更改.如果这个文件发生变化,我想要一个告诉反应本机包装器重新编译的方法.我会接受一个答案:

>当特定文件(.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" }]
      ]
    }
  }  
}

问题是反应本机包装器只能看javascript文件.我不认为改变我的宝贝配置会有所帮助,除非babel可以以某种方式向上反应 – 原生或守望者通知它有些文件需要重新编译…

[编辑2]

我确定反应本地打包器使用守望者来观看文件.例如,当我打开包装商后,我做了看门人列表(并且在做了一个看门人手表之后),我得到

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

此外,当我在包装商运行时删除这个手表,没有任何事情发生(从它的角度来看,js没有改变,因为它没有收到任何更新),但是当我重新启动包装商时,它重新创建了这个手表,.

所以看来,除非有更好的方法,否则我必须创建一个守望者触发器(1)杀死反应包(2)杀死我的应用程序目录上的手表(3)重新启动节点打包程序.这看起来很慢,很笨,但是我想看看它是否能奏效.

我没有把这个工作做成一个通用的方式,但是我正在尝试各种各样的事情.

解决方法

既然已经问了这个问题已经过了两个星期了,我会发布一个可怕的解决办法,我可以拼凑在一起.我会把这个问题解答不了,接受任何一个比这个更好的答案.

反应本机包装程序使用守望者来监视文件系统更改,并且在获取某些JS文件已更改的事件时,它会查看文件是否已实际更改,然后再转发.这样可以防止我做一些简单的事情,像触发相关JS文件的守望者触发器,因为反应包装器认为它是如此聪明,它可以忽略没有差异的更新.随你.

所以我的解决方案是在.env上创建一个看门人触发器,改变哪个调用make_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,所以模式是“*设置*”.注意,这个目标也基本上在每次文件改变时都会杀死并重新启动打包程序,并且它不会包含节点打包程序,因此您将无法再看到该进程.除非你需要查看包装商的输出,否则不是什么大不了的事情.

watchman-cli命令来触发这个是守望者 – 根据. -p .env -t clear_env_cache为了方便起见,我设置了一个nohups这个命令的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等等.欢迎推荐改进可移植性.

猜你在找的JavaScript相关文章