| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
qbel9464
7年前发布

nodejs入门之本地简易cli搭建

   <p>在阅读本文之前,我们假设您已经了解 babel , uglify2 , browserify , crypto 等相应的npm包</p>    <h2>一.项目背景</h2>    <p>平常在开发中,我相信大家会经常用到babel、uglify2、commonjs、本地代理等进行相应的开发。一般情况下,大家会选择grunt、gulp、webpack等进行本地构建。但是也会有一些情况,运用这类构建工具就显得比较笨重了,比如说在本地简单测试或者学习es6语法或者修改js在html中内嵌代码的某个片段,需要压缩后塞到html中,很多人可能会联想到运用全局的babel或者uglify之类的来实现,但是不知道您有没有想过,自己开发一套cli来管理这些散兵游勇呢?这个时候通过 <a href="/misc/goto?guid=4959630042057148692" rel="nofollow,noindex">commander</a> 或者 <a href="/misc/goto?guid=4959748139545514688" rel="nofollow,noindex">inquirer</a> 可以轻松实现。</p>    <h2>二.开发准备</h2>    <p>1. node相关知识储备;</p>    <p>2.因为此次入门讲解中涉及到了hosts修改以及nginx+node实现本地代理功能,所以适当的nginx和shell知识也是需要掌握的;</p>    <p>3.对node常用的npm包有基本的了解与认识。</p>    <h2>三.目录结构和基本功能介绍</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6e6c94c99a70b370bb67913789800985.png"></p>    <p>如上图所示,基本结构主要分为一下几块:</p>    <p>1.idea目录可忽略,是编辑器生成的map文件;</p>    <p>2.addon目录是对v8引擎编写addon的文件夹,里面存放的是相关v8-addon;</p>    <p>3.bin目录下的文件是整个cli的入口;</p>    <p>4.cli目录下的文件主要是执行相关cli操作的文件,在之后会有详细的讲解;</p>    <p>5.config目录存放的是相关配置文件,主要是针对于本地生成目录结构的配置;</p>    <p>6.deps目录主要存放的是bin和cli中文件的依赖文件;</p>    <p>7.sh目录主要存放的是相关的shell文件,通过child_process进行相应的调用(ps:为何没选用相关的node shell package是因为我觉得shell和node还是分开的好,毕竟他们负责的范围和业务都有所区别)</p>    <p>8.test目录主要存放的是相关测试文件,以及为testing做准备(这块未实现)</p>    <p>9.接下来有几个放置于根目录下的文件,相信大家也都知道是做什么用的,我在这里就不详细介绍了(ps:当时在处理的时候有一个全局变量没有用shell写入到zshrc中,所以这里多了一个zshrc的备份)</p>    <h2>四.项目入口&切入点</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ad911cae68ef9168efbbf59eb2a75de2.png"> <img src="https://simg.open-open.com/show/eaa4db57d6ff648f9daf8a0114a51c89.png"></p>    <p>通过上面的xmind脑图大家应该有一个初步的认识:shell文件全部通过child_process在node中进行调用;config文件夹主要为init进行服务;本地代理的实现是通过修改hosts使外部js请求到本地,然后通过nginx把node server代理到80端口,实现本地的文件映射,而hosts是通过shell的sed指令进行控制,shell又是通过node来进行操作的,所以说最后的控制权全部移交到了node。</p>    <p>接下来就从 <a href="/misc/goto?guid=4959748139638682808" rel="nofollow,noindex">入口文件</a> 直接切入到整体逻辑。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/30e3fc34dfa7045940ab6e54c7adf932.png"></p>    <p>这是bin/xtx.js的主要逻辑,代码应该是非常容易就能看明白。主要就是查找cli目录下的所有文件,文件名作为commander的command。从下面的for循环中可以看出,每个文件暴露出来的是一个构造函数(new tag()),构造完毕后有三个属性分别为:option、action以及description,分别挂到了commander中,这样写的好处则在于可以规定好我每个cli文件夹下文件的结构,使得代码易读,并且显得十分整齐。大致的bin下面的每个文件的结构如下所示:</p>    <pre>  <code class="language-javascript">'use strict';  class command{      constructor(){          this.option='',          this.description=""      }      action(){          return ()=>{}      }  }  exports._export = command</code></pre>    <h2>五.日志&帮助的相关编写</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/28915cebca40f91a91d950a17774dcae.png"></p>    <p>一个cli最重要的就是日志和help的完善成度了,因为这是本地自用的东东,所以日志并没有引入 log4js 这种比较重量级的东西,而是决定自己编写简单的console.log,这里我推荐给大家使用的便是 chalk 这款能让你的控制台出彩的插件。用起来也很简单:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/80d45966bcfe1cb7b07548c33cc32817.png"></p>    <p>我在这里设定了三种不同level的console,info用灰色,warning用黄色而error肯定是红色无疑了。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d6b74b21242ded24aa725a3a6f15b5e5.png"></p>    <p>help的编写也有一点点小诀窍,'\n'可以通过join来加进来,这样代码就不会显得那么凌乱了。</p>    <h2>六.一些主要功能的实现方法</h2>    <p>这一章节介绍一些主要的(常用的)commander的实现方式</p>    <p>1.babel</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c09337e08089b3745c89a47a898f9c29.png"> <img src="https://simg.open-open.com/show/0f5835122532fe8dacaebe21ecd0c21b.png"></p>    <p>在使用babel指令后,会在相应文件目录下生成一个 <em>.es5.js,当然也可以带-m参数生成</em> .es5.min.js,这里具体的实现,其实是用到了babel的babel.transformFile方法,如下图所示:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2752493bab52d20b0fd7034cfd74248a.png"></p>    <p>option参数可以确认commander中是否加了-m来决定minified是否设置为true以及生成文件的扩展名,在这里我只引入了es2015 这一个插件作为例子,一般彻底的翻译至少还需要 <a href="/misc/goto?guid=4959643603686751671" rel="nofollow,noindex">babel-polyfill</a> 做支持,在最后生成文件的时候,我通过的是fs.createWriteStream 实现的(./deps/wrstream.js)</p>    <p>2.browserify</p>    <p>已经贴出来了一个commander的实现,其余的基本上都大同小异了,browserify的实现重点则在于require('browserify').bundle这个api,有兴趣的同学可以亲自去试一下。</p>    <p>3.uglify2</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/dca8f704fad00d46a0ba6c0132ae0c07.png"></p>    <p>uglify的实现侧重点在require('uglify-js2').minify这个api上,多说一句,这里用crypto实现了一个md5戳的添加,添加md5戳主要是为了保证压缩后文件名的唯一性,具体的api的用法不多说了,npm git上搜搜都能搜到。我这里实现的比较龌龊了,直接在co内部对readstream做了promise化,其实这里利用readstream eventEmitter的end事件来做minify完全可以(ps:node>=7.8的情况下,建议直接用async/await,不要使用generator了)。</p>    <p>4.svn同步上传</p>    <p>svn同步上传这里主要运用的是从测试线的svn进行tar打包之后传到准线上svn目录,然后执行svn status操作,筛查相关add conflict以及modified等文件状态。进行相应的处理后再做ci操作。这里,我贴两段主要的逻辑:</p>    <p><img src="https://simg.open-open.com/show/f9fb44eb91eef8423e02dafd61300b2b.png"> <img src="https://simg.open-open.com/show/13797b39198a9c1ec2c19a08d6406a5d.png"></p>    <p>第一段逻辑是对svn目录进行tar打包之后传到准线上svn解包的操作,当然,folder可以你自己指定,如果是纯文件的话直接执行cp操作就可以;第二段逻辑是筛查svn add以及conflict冲突的shell函数,如果是需要add的则执行add操作,如果有冲突,则暂停提交,自己手动解决冲突。</p>    <p>5.nginx反向代理(无https)</p>    <p>这里重点讲一下nginx本地代理的实现,https因为还需要伪造公钥私钥对在这里不做讨论。一般来说代理的实现方式有很多种,市面上常见的:</p>    <ul>     <li>charles等,需要通过switchysharp来把chrome的端口从80代理到别的端口,然后对端口做监听,实现对请求的拦截;</li>     <li>proxy,直接修改本地wifi或者有线网络的代理配置,当然,这需要root权限;</li>     <li>nginx反向代理,一般来说网站的js基本都在同一个域名下面,那么我通过修改hosts文件实现域名的dns指向本地,然后通过nginx反向代理实现对80端口的代理,这样我在本地监听这个nginx代理的端口就可以实现proxy。</li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/bdf3b021070d956073accb0b750f2d98.png"></p>    <p>nginx配置应该是轻松加愉快了,只需要把js_server 80端口反向代理到(图为8088)本地监听的端口上即可,之后要做的就是修改hosts文件,使得js_server dns指向localhost。这两项工作都做完后,你只需要在本地的工作区根目录起一个端口为8088的nodeserver即可实现简单的本地文件代理,如果http 请求的文件地址和本地的工作区对不上,建议你在nginx做好配置,如果有commonjs等合并的行为,那么你需要在nodeserver中调用browserify等来进行合并之后再做返回,这里因为每个公司的应用场景都不太一样,所以不做详细的解读了。</p>    <h2>七.总结</h2>    <p>写这篇文章的目的,是为了给大家做本地cli提供一个思路,这是我个人的思路,欢迎大家拍砖,毕竟里面会有不成熟和欠考虑的地方。比如说在commander上注册插件的时候,我不是随取随用,而是直接全部遍历加载之后再进行process.argv的筛查,这里极大的降低了性能。当然大家也可以开放出全局变量,接入webpack之类或者自己写config文件来做相应的task,这块东西我在做的时候思考过,但是没有去实现,因为毕竟现在不论是gulp还是webpack已经非常丰富了,自己做cli的目的只不过是为了随拿随用,定制化配置,复杂化感觉真的没有任何必要,最后附上项目的 <a href="/misc/goto?guid=4959748139758941866" rel="nofollow,noindex">git链接</a> 。</p>    <p> </p>    <p>来自:http://div.io/topic/1975</p>    <p> </p>    
 本文由用户 qbel9464 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1493261103873.html
Node.js Nginx SVN Node.js 开发