Total Pageviews

Monday, 29 August 2016

jspm-server自动刷新页面

我在 JSPM 环境下开发时,页面修改由 Browsersync 监控并自动刷新:
browser-sync start --server --files '*.html, style/**, script/**'
BrowserSync 的好处是,如果多个浏览器中测试同一个页面地址,则页面修改会同步到多个浏览器中。
后来想,gulp.js、webpack、grunt.js 等都内置了自动刷新页面的功能,jspm 或许也会有。找了资料,没有,但有个 jspm-server,这是 live-server 的一个分支,针对 jspm 做了处理。

jspm-server 用法

  1. 全局安装 jspm-server
    npm install -g jspm-server
    
  2. 启动 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 同样具备热重载的功能,条件有二:
  1. 在 index.html 中设置 System.trace = true;,当然,也可以在 config.js 文件中配置
  2. 在能够热重载的 ES6 模块中添加 export let __hotReload = true
关于第二步,可以借助浏览器的开发者工具,我的经验,有关联的模块都需要增加该语句。另外,CSS 文件默认能够自动热重载,不需要我们额外处理.