前端nodejs编译

① 为什么前端要会使用Nodejs

你熟悉JavaScript
假设你正在使用一个功能强大的客户端框架(Angular，Ember,
Backbone)以及REST-ful服务器端的API，使用JSON这种数据格式来传输和接受数据。即使你没有使用其中的任一种框架，你也用jQuery写过自己的框架。因此如果你不在服务器端使用Node.js，那么你就不断地做转译吧。你在转译两件事：
来自你脑中JavaScript的逻辑转换为服务器端框架的逻辑。
来自JSON的HTTP数据转换为你的服务器端的对象。
JavaScript贯穿着你的应用，你不但智力上涨，你也获得了实践经验。通过模型和模板的复用，你可以减少应用的大小，同时减少了复杂度和出现bug的可能性。
它很快
Node.js是JavaScript运行环境，使用了Google用在Chrome中的V8引擎。V8以闪电般的速度编译和执行JavaScript是因为V8将JavaScript编译成本地机器代码。包括网络连接的读写，文件系统的读写，以及数据库的读写——所有的在网页应用中的日常任务——在Node中执行地非常非常快。Node能让你创建快速，大规模的网络应用，能够处理高吞吐量的大量的实时连接。
工具
npm是Node.js的包管理器并且它棒呆了。这确实很棒，当然，这类似于其他生态系统的包管理器，但是npm很快很稳很一致。他在寻找和安装项目依赖做的非常好。他让包和其他的项目隔离开来，防止版本混淆。
实时变得简单
如果Node.js很擅长多并发连接，那么他也擅长多用户的，实时的网页程序，例如聊天室和游戏。Node的
event loop
能够满足多用户需求。实时能力使用websocket协议。Websocket是在客户端和服务器端的简单的双向沟通渠道。因此服务器能够推送数据到客户端就像客户端推送一样。websocket运行在TCP，避免了HTTP的消耗。
流数据
传统意义上来说，web框架将HTTP请求和响应当做一个整体的数据对象。实际上，他们是I/O流，你可以想象，如果你把文件从文件系统中以流的形式取出。既然Node.js非常擅长处理I/O，我们能够利用这个特点创建一些很酷的东西。比如，它能够当视频或音频文件上传的时候，就转码音频或视频文件，减少了整体处理的时间。
一个代码库和免费的实时
Meteor是下一代基于Node的web框架。他可以在客户端和服务器端运行相同的代码库。然后，数据自动保存在服务器。其他的方式也奏效！任何服务器上的数据都自动传到客户端。

② 如何系统地学习Node.js

对于刚接触Node.js的新手来说，第一步无非是打好基础，你需要弄明白以下事情：

JavaScript 的特性和语法。假如你对 JavaScript 还不熟悉的话，推荐书籍及链接：

JavaScript 推荐书籍列表

深入理解JavaScript系列

Node.js 是什么？Node.js与JavaScript的区别是什么？

Node.js的优点？Node.js的缺点？

Node.js适用场景？Node.js不适用的场景？

Node.js的基本语法。Node.js的特性：

单线程

异步 IO

事件驱动

npm 是什么？npm的基本使用

REPL

等等

其实上面的内容，大部分Node.js的书籍都有介绍。基本了解了Node.js后，我们可以写一些 hello world 的程序：

搭建一个 HTTP 服务器，返回 hello, world 。(使用 HTTP 模块)

读取一个 txt 文件，将内容显示到命令行中。（使用 fs 模块）

等等

第二步

你也许想，Node.js 只有那些少得可怜的核心模块能做什么呢？别担心，npm 上目前有近 7W 的第三方模块，月下载量高达 2.1亿 （2014—4—20 数据）… 这才是 Node.js 的活力所在。当你对Node.js已经了解的差不多了，并且按耐不住跃跃欲试了。这个时候，我们不妨用 Node.js 的第三方模块做些好玩的事情：

搭建一个微博网站

搭建一个博客网站

搭建一个在线聊天室

写一个简单的爬虫

调用一些网站的API做一些好玩的东西

等等

但是，并不是说 Node.js 只能做以上事情，几乎其他语言能做的事情 Node.js 都能做，而且有些情况下能做的更好。

第三步

当然，就像学 js 也不能只会用框架一样，学习 Node.js 也不能只会用外部模块。这个时候，我们需要回头深入了解下 Node.js 核心模块的用法。说白了，就是好好看 Node.js 官方 API 文档。看文档是码农必备技能，英语不好的童鞋浏览器装个划词翻译的插件。

第四步

多实践。不管是用核心模块还是外部模块，尝试用 Node.js 解决某个问题或者替换掉以前用其他语言写过的代码。

读源码。这里说的读源码并不是说上来就去读 Node 或者其他较大的框架的源码。这个时候，挑一些简单的只实现某个特定功能的工具模块的源码读，这种模块的代码通常在几百行，阅读起来并不是很困难，但是却能涨不少的姿势。比如：

underscore （学习 JavaScript 的语法和技巧）

等等

第五步

坚持第四步。在使用 Node.js 时发现没有合适的模块选择或者选择的模块功能不尽人意，这个时候你可以尝试去创建一个模块或者修改现有的模块，并且使用 npm 发布自己的模块或者去该模块的 GitHub 上提 PR 。

第六步

多实践。这个就不用解释了

读 Node 源码及较大的框架的源码。提高必备

多关注下 GitHub 上的牛人

重复第1-6步

③ 手把手教你使用nodejs编写cli(命令行)

前端日常开发中，会遇见各种各样的cli，比如一行命令帮你打包的webpack，一行命令帮你生成vue项目模板的vue-cli，还有创建react项目的create-react-app等等等等。这些工具极大地方便了我们的日常工作，让计算机自己去干繁琐的工作，而我们，就可以节省出大量的时间用于学习、交流、开发、 逛steam 。

但是有时候一些十分特别的需求，我们是找不到适合的cli工具去做的。比如说，你的项目十分庞大，你给项目添加一个新的路由，要经过 创建目录 -> 创建.vue文件 -> 更新vue-router的路由列表 这一趟流程，就算快捷键创建目录文件用得再熟悉，也比不过你一行命令来得快，特别是路由目录嵌套深，.vue文件初始化模板复杂的时候。

所以呢，何不为自己项目写一个cli？就专门做这些繁琐的活？

nodejs的cli，本质就是跑node脚本嘛，基本上每位前端er都会：

然后命令行调用

可以做得更逼真一点，我们在package.json里面的scripts字段上添加一下脚本名：

然后命令行调用：

但是，看到这里你肯定会说，人家webpack还有vue-cli都是“有名字”的！什么 vue-cli init app 、 webpack -p 的，多漂亮，看看这个命令行， node index.js ，还 npm run hello ，谁不会啊，丑不拉几的，怕又不是来水文章的哦？差评！！

别急啊各位大人，接下来就说说，如何给这个node脚本起个名字。

姑且，先把这个cli的名字命名为 hello-cli ，就是我们能够在命令行里面，输入 hello-cli ，然后它就打印一句 hello world ，没有 node 也没有 npm ，就是：

这样，你的第一个cli脚本就成功安装了，可以在命令行里面，直接敲你的cli名字，看看结果输出吧。

另外，如果你仅希望你的cli脚本仅在项目里执行，则需要在你项目里面新建一个目录，重复上述的操作，只是在第三步的时候，不要llink到全局里面去，而是使用 npm i -D file:<你的脚本cli目录路径> ，把它当成项目的依赖安装到node_moles里面去，如果安装成功，那么在项目的package.json你会看到多了一条依赖，这条依赖的值不是版本号，而是你脚本的路径。然后在node_moles里面会有一个.bin目录，里面就存放着你的可执行文件。

当然，这样安装的cli脚本，必须在项目的package.json的scripts字段上声明脚本命令，然后通过 npm run 的方式执行。

哦？这样子使用的话不就回到最最最开始的时候那种原始的 npm run hello 一样么。

是的，但是有质的区别。使用 node index.js 这种方式调用的话固然简单灵活，但是严重依赖脚本路径，一旦目录结构发生变动，写在scripts的命令就要更改一次；但是使用npm安装之后，本地的cli脚本就被拉到node_moles里面，目录结构变动对其影响不大。其次是不利于分享与发布，如果你想把你的cli脚本发布出去，那么有一个好听响亮的名字，比起在说明文档里面告诉使用者如何找到你的脚本路径再用node执行它，简直好上那么一万倍不是么？

这里也给我们提供了一个cli开发流程思路：

名字有了，输出也有了，看看我们跟那些大名鼎鼎的cli工具，在形式上还差点啥？对了，人家可以支持不同参数选项的，还可以根据输入的不同，产生不同的结果。

这样吧，我们给这个cli加一个功能，既然叫 hello-cli ，那不能只会 hello world 吧，必须要见谁就说 hello 才行：

虽然这个功能很简单，但是至少也是实现了“根据输入的不同，产生不同结果”的效果。

命令行上的参数，可以通过 process 这个变量获取， process 是一个全局对象而不是一个包，不需要通过 require 引入。通过 process 这个对象我们可以拿到当前脚本执行环境等一系列信息，其中就包括命令行的输入情况，这个信息，保存在 process.argv 这个属性里。我们可以打印一下：

打印结果：

可以看出，argv是个数组，前两位是固定的，分别是node程序的路径和脚本存放的位置，从第三位开始才是额外输入的内容。那么实现上面的功能就很简单了，只要读取argv数组的第三位，然后输出出来就可以了。

npm社区中也有一些优秀的命令行参数解析包，比如 yargs ,tj的 commander.js 等等

如果你想使用比较复杂的参数或者命令，建议还是用第三方包比较好，手写解析太耗精力了。

现在，你可以自由自在的写你自己的cli脚本了。
如果你希望写一个项目打完包自动推上git的cli，或者自动从git仓库里面拉取项目启动模板，那么，你需要通过node的 child_process 模块开启子进程，在子进程内调用git命令：

不仅是git命令，包括系统命令、其他cli命令都可以在这里执行。特别是系统命令，使用系统命令对文件目录进行操作，效率比fs高到不知道哪里去了。

社区上也有一些不错的包，比如阮一峰老师推荐的 shelljs

如果你不那么希望你的cli用起来那么“硬核”，希望更人性化一点，比如提供一些友好的输入、提示啊，给你的输出加点颜色区分重点啊，写个简单的进度条啊等等，那么你就需要美化一下你的输出了。

除了颜色这部分，不使用第三方包实现起来非常繁琐复杂，其他的功能，都可以试试自己写。
颜色部分使用了第三方包 colors ，这里就不演示了。
其他都是由nodejs自带的 readline 模块实现的。

绘制的思路跟canvas绘制动画一样，只不过canvas是清除画布，而命令行这里是通过 readline.clearScreenDown 清除输出。

这样，一个简易的，人性化的，带点点进度条动画的命令行cli工具就写好了，你也可以发挥你的想象力，去写一些更有趣的效果出来。

毕竟我们前端，有浏览器我们可以写动画，没了浏览器我们一样可以写动画。

④ 前端用nodejs能做什么

Node.js到底是什么？

Node.js是一个JavaScript的编译环境，当前端语言JavaScript在写完之后可以交给Node.js进行编译和解释，它的存在对于JavaScript有了质的飞跃。

下面就是一个简单的Node.js命令

#node hello.js

目前，Node.js在大部分领域都占有一席之地，尤其是I/O密集型的。

比如Web开发，微服务，前端构建等。不少大型网站都是使用 Node.js 作为后台开发语言的，用的最多的就是使用Node.js做前端渲染和架构优化，比如 淘宝 双十一、去哪儿网 的 PC 端核心业务等。另外，有不少知名的前端库也是使用 Node.js 开发的，如Webpack是一个强大的打包器，React/Vue 是成熟的前端组件化框架。

Node.js通常被用来开发低延迟的网络应用，也就是那些需要在服务器端环境和前端实时收集和交换数据的应用（API、即时聊天、微服务）。阿里巴巴、腾讯、Qunar、网络、PayPal、道琼斯、沃尔玛和 LinkedIn 都采用了 Node.js 框架搭建应用。

另外， Node.js 编写的包管理器npm已成为开源包管理了领域最好的生态，直接到2017年10月份，有模块超过47万，每周下载量超过32亿次，每个月有超过700万开发者使用npm。

Node.js是一个对于前端工作者不可或缺的工具。尤其是对于JavaScript有着巨大的提升，现阶段Node.js的应用已经有了非常蓬勃的发展。对于Node.js的学习和熟练运用，必不可少！