json文件
// ~/blog/user/account/1.0.0 文件夹产出的地图文件, 1.0.0/exports下的入口文件的依赖都生成到了maps里面
{ "settings": { "port": 1234, "debugParam": "debugId", "domain": "http://cn-style.gcimg.net/static" }, "maps": { "user/account:1.0.0/help.css": { "css": [ "/core/reset/1.0.0/reset_e5b6e95.css", "/user/account/1.0.0/account_2e2d290.css", "/user/account/1.0.0/exports/help_5751a04.css" ], "loader": "", "js": [], "onlyCss": true }, "user/account:1.0.0/login": { "css": [ "/core/reset/1.0.0/reset_e5b6e95.css", "/user/account/1.0.0/account_2e2d290.css", "/user/account/1.0.0/css/login_9fa75f4.css" ], "loader": "/lib/loader/1.0.0/loader_aa23401.js", "js": [ "/user/account/1.0.0/account_8c2acc1.js", "/user/account/1.0.0/exports/login_1074d04.js" ], "onlyCss": false, "map": "atmjs.setMap({\"_alias\":{},\"alias\":{\"user/account:1.0.0/other/ajax\":\"/user/account/1.0.0/other/ajax_49ac7f5.js\"},\"pkg\":{},\"cssDeps\":{}});" }, "user/account:1.0.0/reg": { "css": [ "/core/reset/1.0.0/reset_e5b6e95.css", "/user/account/1.0.0/account_2e2d290.css", "/user/account/1.0.0/css/reg_a005dbe.css" ], "loader": "/lib/loader/1.0.0/loader_aa23401.js", "js": [ "/user/account/1.0.0/account_8c2acc1.js", "/user/account/1.0.0/exports/reg_0d22604.js" ], "onlyCss": false } }}
1.当登陆页上线之后,我想利用线上的页面(假设访问地址为:http://url/login.html)调用本地的js/css资源去调试,如何实现
json文件中的settings字段中的debugParam的值为debugId,因此,我们可以通过访问
http://url/login.html?debugId 或
http://url/login.html?debugId=true
去调用127.0.0.1的资源,因为线上程序无法获取到本地的地图文件,因此这里比较纠结,最终的解决方案是这样的:
本地的node环境提供了一个调用js和一个css的接口,相应的资源会合并到一个文件里面
因此,如果是调试模式
css应该是这样的,而不用去考虑deps.css的内容
<link rel="stylesheet" type="text/css" href="http://127.0.0.1:1234/debug?id=user/account:1.0.0/login&type=css&domain=http://127.0.0.1:1234/dev×tamp=1437033687" />
同样的,js最终应该是
<script type="text/javascript" id="atmjsnode" data-base="http://127.0.0.1:1234/dev" src="http://127.0.0.1:1234/debug?id=user/account:1.0.0/login&type=js×tamp=1437033687"></script> <script type="text/javascript">atmjs.use(‘user/account:1.0.0/login‘)</script>
参数中的id为入口文件id,时间戳是为了防止缓存,type表示文件是js还是css类型
2.现在调试模式全部调用的是127.0.0.1上的资源,那么问题来了,如果去调试一个移动站点,用手机肯定是调试不了调试模式
因此我们要想法把127.0.0.1去替换成一个手机可以访问的ip,比如 192.168.1.100
因此,我们用
http://url/login.html?debugId=192.168.1.100
去调试
然后对应的css和js调用,要变成下面这样子
<link rel="stylesheet" type="text/css" href="http://192.168.1.100:1234/debug?id=user/account:1.0.0/login&type=css&domain=http://192.168.1.100:1234/dev×tamp=1437034561" /> <script type="text/javascript" id="atmjsnode" data-base="http://192.168.1.100:1234/dev" src="http://192.168.1.100:1234/debug?id=user/account:1.0.0/login&type=js×tamp=1437034561"></script> <script type="text/javascript">atmjs.use(‘user/account:1.0.0/login‘)</script>
因此参数中的 domain和script标签中的data-base的值的值是这样得来的
$port = 1234; //settings.port$debugId = ‘debugId‘; //settings.debugParam $debugId = $_REQUEST[$debugId]; if($debugId==‘true‘ || empty($debugId)){ $debugId = $this->debugId = ‘127.0.0.1‘; }else{ $debugId = $this->debugId = $debugId; } $domain = ‘http://‘.$debugId.‘:‘.$port.‘/dev‘;
src和href的调试地址前缀是这样得来的
$port = 1234; //settings.port $debugId = $_REQUEST[‘debugId‘]; if($debugId==‘true‘ || empty($debugId)){ $debugId = $this->debugId = ‘127.0.0.1‘; }else{ $debugId = $this->debugId = $debugId; } $prefix = ‘http://‘.$debugId.‘:‘.$port.‘/debug‘;
同样的,如果入口文件是css文件,SCRIPT标签不能输出
时间: 2024-08-22 00:44:58