我在 JSPM 环境下开发时,页面修改由 Browsersync 监控并自动刷新:
browser-sync start --server --files '*.html, style/**, script/**'
BrowserSync 的好处是,如果多个浏览器中测试同一个页面地址,则页面修改会同步到多个浏览器中。
后来想,gulp.js、webpack、grunt.js 等都内置了自动刷新页面的功能,jspm 或许也会有。找了资料,没有,但有个 jspm-server,这是 live-server 的一个分支,针对 jspm 做了处理。
jspm-server 用法
- 全局安装 jspm-server
npm install -g jspm-server
- 启动 jspm-server切换到项目目录,执行:
jspm-server
默认开启的地址是http://127.0.0.1:8080/
,我们可以通过--port
参数指定端口:jspm-server --port=9999
与 Browsersync 类似,jspm-server 在 v0.1.6 版本后,同样可以同步刷新多个浏览器中打开的页面。
热重载
如果你开发过 react,就会发现,它的大小模块非常多,如果每次修改一个小模块,就要整个页面重载 – 加载上百个小模块的话,则至少需要 1、2 秒的时间,这会降低我们的开发效率。所以 react 社区里出了一个 react-hot-loader,可以只重载我们修改过的模块 – 即热重载,大幅提高我们的开发效率。
jspm-server 同样具备热重载的功能,条件有二:
- 在 index.html 中设置
System.trace = true;
,当然,也可以在 config.js 文件中配置 - 在能够热重载的 ES6 模块中添加
export let __hotReload = true
关于第二步,可以借助浏览器的开发者工具,我的经验,有关联的模块都需要增加该语句。另外,CSS 文件默认能够自动热重载,不需要我们额外处理.