起初看到三种语言能力一直没搞清楚,为什么是三种语言能力,明明没有看到对编程语言的要求;原来早期FIS团队在设计这个前端集成系统的时候,也会有迷茫区,不知道最终要打到什么目的;就在纠结期与迷茫期,最后找到了前端开发所需要的编译能力只有三种:资源定位、内容嵌入、依赖声明。
什么是资源定位?
项目发布后,一个用户访问页面各种资源的地址;如何将开发中资源路径定位到线上环境中资源路径?
一个页面有HTML文件,CSS文件,JS文件,分别了解下各个文件是做到资源如何定位的:
HTML文件代码:
- <!–源码:
- <img title=“百度logo” src=“images/logo.gif”/>
- 编译后–>
- <img title=“百度logo” src=“/static/pic/logo_74e5229.gif”/>
- <!–源码:
- <link rel=“stylesheet” type=“text/css” href=“demo.css”>
- 编译后–>
- <link rel=“stylesheet” type=“text/css” href=“/static/css/demo_7defa41.css”>
- <!–源码:
- <script type=“text/javascript” src=“demo.js”></script>
- 编译后–>
- <script type=“text/javascript” src=“/static/js/demo_33c5143.js”></script>
它是如何做到的,上篇文章中解释了,运行fis release 会查找当前目录下的fis-conf.js这个文件,根据不同的配置,就可以发布定位到线上的地址了。
- fis.config.merge({
- roadmap : {
- path : [
- {
- //所有的js文件
- reg : ‘**.js’,
- //发布到/static/js/xxx目录下
- release : ‘/static/js$&’
- },
- {
- //所有的css文件
- reg : ‘**.css’,
- //发布到/static/css/xxx目录下
- release : ‘/static/css$&’
- },
- {
- //所有image目录下的.png,.gif文件
- reg : /^/images/(.*.(?:png|gif))/i,
- //发布到/static/pic/xxx目录下
- release : ‘/static/pic/$1′
- }
- ]
- }
- });
同理CSS文件,JS文件也会引用到相应的静态资源:
- /*源码:
- @import url(‘demo.css’);
- 编译后*/
- @import url(‘/demo_7defa41.css’);
- .style {
- /*源码:
- background: url(‘images/body-bg.png’);
- 编译后*/
- background: url(‘/images/body-bg_1b8c3e0.png’);
- /*源码:
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/body-bg.png’);
- 编译后*/
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/images/body-bg_1b8c3e0.png’);
- }
- /*源码:
- var img = __uri(‘images/logo.gif’);
- 编译后*/
- var img = ‘/images/logo_74e5229.gif’;
- /*源码:
- var css = __uri(‘demo.css’);
- 编译后*/
- var css = ‘/demo_7defa41.css’;
- /*源码:
- var js = __uri(‘demo.js’);
- 编译后*/
- var js = ‘/demo_33c5143.js’;
通过对应的配置信息,就可以得到编译后的地址了;
什么是嵌入资源?
编译中文本文件的内容或者二进制文件(如图片)的base64编码嵌入到另一个文件中;
拿官网的firstblood做解释:编译前,index.html中通过src引进了js,css,image
- <style>
- @import url(‘demo.css?__inline’);
- .style {
- background: url(‘images/logo.gif?__inline’);
- /*filter不支持base64,所以没做处理*/
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/body-bg.png?__inline’);
- }
- </style>
- <img title=“百度logo” src=“images/logo.gif?__inline”/>
- <script type=“text/javascript” src=“demo.js?__inline”></script>
编译后在查看index.html
- <style>
- img { border: 5px solid #ccc; }
- .style {
- background: url(‘data:image/gif;base64,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′);
- /*filter不支持base64,所以没做处理*/
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/images/body-bg.png?__inline’);
- }
- </style>
- <img title=“百度logo” src=“data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfOene1qZ8/R+Ker84WK7ubn+/vh4DQ840VM5Sky4eEGAv///yH5BAAAAAAALAAAAAAOAYEAAAT/8MlJq7046827/2AojmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlYsJCAwLAAaWkQYLDaKiCJ6OCaGjowcYBgChDKymfQCqqgsJFge2DQACs3oGvKqyE7vDAMB5CMOjDBTCzQ3FynS10g2/EtfNz9V1qdK5DwnYop3fc+YN6MfY1Olv4c3jzObw8W0M5tr22OP53vgb5u3BQIIB1WiDhq2UBHfNHCYkIwBBKk4UuNnCNSFaM44T/8ck2GerGKhh8EiiDElGI7GO8xpI7BiR5RiIGwFigoXvYcyZNr+4tAW0g4ADCBAcAHhUJcagVgSYK3hCwFCZUKt4lKbiKqmsU3AOW1hi6zCAYJ0cPItiLdG0UMTyQkvhAIB9DJ5e8OoM7hOzwy4YUKkKAF0JMQP7dZK4sC5sDNBRWNdgsdp3FeTmrEC5hwAHoB0E6PM5tOnTogMEKDDgRYHTEwQQLkwWcLNkFBrf8mx6NJ/SqIOfJtDitWloiRnQnd2QAnNb3gIIn059AvXrwVvHAY4ddQCyJ4yHrpCAGwME4N1ilqB+lEPp3btbj99dOxzu9EMXWCEedKvDD2iGzf8C6NimCjrw5TfdfApOZ98b+DX4oAn9OQCCgeswoA1fuD2QYIOoMegAAQOUaOKJKKZYInht4LdfBgR86MCLKAxAwI03fnASMQb0uA5uVhEEkAIqnvghiUXaZ5qSoU04QYIsQngajRgIIKMPOx44AWUdGoDAXXkdECUGA/TmwZIiOikBlHW4yAEBp41Jg2aSUdZLCv0R18GSIJqmgBxubgCnaQvJGNxqTlbIgYB12tnhBn2ithCfkTrw53ZTcqDok/QFcKkEm2bAFztb2tmLnCJWOmmTlVoKaKYaDBqab2sqaF+oFgRZ2AE99riQKAAES9gmwgILIAWthrYqaEwyiwH/m3Tgt1oB1FZbraF61prfd6DCdoFst/S05QITlDNKh+Y2oJwGvanm7rvwuktomvReAO0cEW5bQZImxjhct8ftdYtkGDRArgTp3onwwBmYlm0HZSpb7wMOqyirA6iukS99am5gpZkP4GpMSdAcYPKvB5Pj2MK3HOswCBGDtqwDzcaXsUKRdvymtyI/IMA8VA1UZ8oJo8vLo8iG9jAHMWM8sb5tVrq0BxdbGLK3db31kC1Dl7uyynNd8PIHTc9c83UFfIqvd/G+i9rU/tIH8HgVuFSMS12zDKzXvBRFcbJOS4BmIoFm0DRoalco39UB50ayBLPlDfbeeqtCVaqRmn24/4Jrm0YlmbAyzrno/nGm9QN4j8s35ZPvZgHggf/N7Ob5da5fBx/6RvviPR9Nk5YSGLy6wq2rIjbgmkdK632ha7Bp7h1XPXfpzoUtgSujSB5gsABIlPAoKScNGpL8nnix2Q/EDVoAS6s//s1nFK6BjALgp7P0pFtNwVpIX3DOBt9jnfhGBLN5Ca5JEhBA1QLQGvfNCH5okB/o4qQArF0Afz2Ti98mo65jVc49xxtfASV2QGdNQAEVklHa7iDBCiigaqLx2WnuxzMLJvA5sTiWM8SEgQCS6nVKG6HMJjaBARhKNDpjXqtedBoGYgCDNtyaqaaIDAyMjWoGlB3NLrA5T9TpYWP50Ybi4jM9/dWNimjMnhWRR8T0HRE0K2Rhq+zzsQaVsUqjSuNK1pisARqROm9EIKb65EQKKCCQC8qfBg7wHGd0TykmS8orpkIwIC7Rj29kn8/GaEIlbqsAU0ugA69zxw0YIJKQ5FXGvHSXWwCAh+yq1GrI8q4/TmlCAxhjEi3Dy1768pfADKYwh0nMYhrzmMhMpjKXycxmOvOZ0IymNKdJzWpa85rYzKY2t8nNbnrzm+AMpzjHSc5ymvOc6EynOtfJzna6853wjKc850nPeoYgAgA7″/>
- <script type=“text/javascript”>console.log(‘inline file’);</script>
通俗的讲就是原先用外链引入的内容,经过编译直接在页面上输出出来;
什么是声明依赖?
可以回想一下Node.js的插件机制,每个插件安装好,插件目录下会有一个node_modules文件夹,这个文件夹里面的内容就是这个插件所依赖的包。所以这变的声明依赖关系和Node.js的模块依赖有点类似。
这种依赖原型在源文件用@require xx,最后这种关系在编译后形成,编译后会有一个map.json,查看下文件源码:
- {
- “res” : {
- “demo.css” : {
- “uri” : “/static/css/demo_7defa41.css”,
- “type” : “css”
- },
- “demo.js” : {
- “uri” : “/static/js/demo_33c5143.js”,
- “type” : “js”,
- “deps” : [ “demo.css” ]
- },
- “index.html” : {
- “uri” : “/index.html”,
- “type” : “html”,
- “deps” : [ “demo.js”, “demo.css” ]
- }
- },
- “pkg” : {}
- }
deps这个属性就显示了各个文件对应依赖的外部文件;当然前提是你在index.html中加了
- <!–
- @require demo.js
- @require “demo.css”
- –>
理清了这“三种语言能力“,对FIS的理解又深了一层。。。
转载请注明:TUTERM.COM » 何为三种语言能力—FIS