npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

v8-hot-reload-kit

v0.0.15

Published

hot-reload toolkit for v8 environment

Downloads

191

Readme

v8-hot-reload-kit

各种v8环境(nodejs,chrome,puerts等等)代码运行时热刷新。

安装

npm install v8-hot-reload-kit

watch命令

功能:监听本地一个目录,如果目录下的.js, .mjs文件发生变化,远程刷新v8环境代码

nodejs案例

  • 运行nodejs测试脚本,打开在9222端口打开inspect功能
node --inspect=9222 test/node-test/test.js
  • 用v8-hot-reload-kit的watch命令监听test/node-test/目录
npx v8-hot-reload-kit watch test/node-test
  • 接着你可以修改test/node-test/下的js文件看测试脚本的屏幕输出

  • v8-hot-reload-kit对比node --watch

    • node --watch会重启脚本,一些upvalue会重置,v8-hot-reload-kit
    • test/node-test/test.js为例,用node --watch test/node-test/test.js运行,修改test.js,计数器i变量会重置,用v8-hot-reload-kit则不重置

chrome案例

  • 找到你系统chrome的可执行程序目录,打开命令行/终端执行如下命令:
chrome --remote-debugging-port=9223

注意:执行如上命令前需要关闭系统所有chrome实例。

如上命令启动的chrome在9223端口开启了远程调试功能。

  • 启动http服务器,根目录为test\browser-test,端口为8081
npm install http-server
npx http-server test/browser-test -p 8081
  • 在前面启动的chrome浏览器中输入地址 http://127.0.0.1:8081/ 浏览我们的测试页面

  • 用v8-hot-reload-kit的watch命令监听test/browser-test/目录,并指明远程端口为9223

npx v8-hot-reload-kit watch test/browser-test -p 9223
  • 修改test/browser-test/test.js,观察chrome页面的修改效果

puerts编辑器案例

  • puerts的实例启动时指定远程调试端口,假设端口为8080

    • unreal engine下在FJsEnv的构造函数中指定
    • unity下在Puerts.JsEnv构造函数中指定
  • 用v8-hot-reload-kit的watch命令监听js加载目录的根目录,path/to/your/puerts/js/root目录,并指明远程端口为8080

npx v8-hot-reload-kit watch path/to/your/puerts/js/root -p 8080
  • 修改ts代码,手动或者watch自动编译后看编辑器效果

puerts真机案例

  • 注意!puerts出于安全考虑,真机默认不开启远程调试功能,需要手动开启

    • unreal engine下在JsEnv.build.cs文件在ThirdParty函数中加入PrivateDefinitions.Add("WITH_INSPECTOR");
    • unity在puerts/unity/native_src/CMakeLists.txt加入list(APPEND PUERTS_COMPILE_DEFINITIONS WITH_INSPECTOR),并重新构建Plugins
  • puerts的实例启动时指定远程调试端口,假设端口为8080

    • unreal engine下在FJsEnv的构造函数中指定
    • unity下在Puerts.JsEnv构造函数中指定
  • 用v8-hot-reload-kit的watch命令监听js加载目录的根目录,/path/to/your/local/js/root目录,并指明远程端口为8080,指明远程js根目录/path/to/your/remote/js/root

npx v8-hot-reload-kit watch path/to/your/puerts/js/root -p 8080 -r /path/to/your/remote/js/root

小技巧:如果不知道远程js跟目录,可以不输入远程js根目录,然后加-v (verbose)参数:

npx v8-hot-reload-kit watch path/to/your/puerts/js/root -p 8080 -v

会有类似这样的日志:

/js/Gamescripts/Form/Main/MailFormLogic.mjs loaded, id: 351
/js/Gamescripts/Logic/Shop.mjs loaded, id: 352

...

观察这些日志我们可以总结出远程js根目录为/js/Gamescripts

  • 修改ts代码,手动或者watch自动编译后看编辑器效果

update命令

watch是监听一个目录,文件只要有更新就刷新到远端。而update只更新一个文件。

示例:

node bin\hot_reload.js update test/node-test a.js
  • 参数1是localRoot目录,如果是浏览器或者设置了remoteRoot参数,用于本地和远程url的映射
  • 参数2是要更新的文件,输入的是相对localRoot的路径