前端自动化开发之Node.js的环境搭建教程


Posted in Javascript onApril 01, 2017

一、为什么我们前端自动化开发

相信任何学开发的,不管学什么语言,老师都这样讲过,作为一名开发人员,你最大的精力应该是放在创造力上面,don't you repeat myself 不要重复自己,而在我们开发过程中,往往存在很多大量的重复操作,所以我们需要为这些操作省去时间,腾出更多的时间来让我们创造。

而自动化开发能带来哪些自动化:

     1.自动编译(将less,sass等自动编译)

     2.自动合并(将页面引入的多个js文件,或者css文件,合并为同一个且压缩)

     3.自动刷新(IDE保存,浏览器不用刷新,自动看到效果)

     4.自动部署(自动将项目打包部署到指定目录)

     5.自动同步(能够方便实现多个浏览器窗口,同步点击,输入,调试)

有没有感觉很心动额,能够帮我们做这么多事情,所以下面我们就来搭建吧,此次搭建,包括环境搭建,工具搭建,项目架构搭建,连载,今天这篇,将环境搭建的初步,nodejs环境搭建。

二、Node.js是个什么东西?

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 
Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

翻译一哈就是:Node.js是一个基于Chrome V8引擎的javascript的运行环境,其使用了事件驱动,非阻塞I/O模型,非常轻便高效,其包管理工具npm,是全球最大的开源库生态系统。

意思就是,本来浏览器在显示我们看到的网站的时候,会做很多事情,页面渲染,js渲染等等,然后node把其中js渲染的引擎拿出来,并且使用了谷歌的V8,然后在其外面又封装了一层api,让其拥有了文件读写,网络等操作,提供了一个服务端的运行环境,但却是运行的javascipt。所以说nodejs给前端开发行业带来了一场工业革命。

三、安装Node.js

安装有多种方式,,https://nodejs.org/en/ 可以直接在官网,下载安装版安装,这种方式很简单粗暴,下一步就解决,就不多介绍了,介绍另一种方式,nvm安装,因为有时我们在使用过程中,可能要用多种版本的node,而nvm可以让我们在使用过程方便的切换的使用版本。

第一步下面NVM的包,https://github.com/coreybutler/nvm-windows/releases ,我们选择第一个:nvm-noinstall.zip 下载完成后解压到一个地方,比如: C:\dev\nvm 里面的文件列表是这样的:elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe

双击 install.cmd 然后会让你输入”压缩文件解压或拷贝到的一个绝对路径” 先不用管它,直接回车,成功后,会在C盘的根目录生成一个settings.txt的文本文件,把这个文件剪切到C:\dev\nvm目录中,然后我们把它的内容修改成这样:

root: C:\dev\nvm 
path: C:\dev\nodejs 
arch: 64 
proxy: none

然后我们开始配置环境变量了,因为刚刚点击了install.cmd的文件,那么会在环境变量的系统变量中,生成两个环境变量:NVM_HOME 和NVM_SYMLINK 我们开始修改这两个变量名的变量值:NVM_HOME的变量值为:C:\dev\nvm; NVM_SYMLINK的变量值为:C:\dev\nodejs

然后我们配置PATH的环境变量,为了添加%NVM_SYMLINK%,%NVM_HOME%,

打开cmd,输入命令nvm -v看到版本信息,就说明安装成功了

然后下载nodejs,输入命令,nvm install lastest就可以下载最新版本的node,如果要指定版本,也可以nvm install 6.4.0,如果电脑是32位的,注意在后面加上32,nvm install 6.4.0 32,因为默认是64位的

四、npm的安装

我们安装的每个node版本中已经自带了一个npm,但是由于我们可能会有切换node版本的时候,这时为了统一起见,我们需要安装一个全局的npm

首先我们进入命令模式,输入 npm config set prefix "C:\dev\nvm\npm" 回车,这是在配置npm的全局安装路径,然后在用户文件夹下会生成一个.npmrc的文件,用记事本打开后可以看到如下内容:prefix=C:\dev\nvm\npm

然后继续在命令中输入: npm install npm -g 回车后会发现正在下载npm包,在C:\dev\nvm\npm目录中可以看到下载中的文件,以后我们只要用npm安装包的时候加上 -g 就可以把包安装在我们刚刚配置的全局路径下了。

我们为这个npm配置环境变量: 变量名为:NPM_HOME,变量值为 :C:\dev\nvm\npm

在Path的最前面添加; %NPM_HOME%,注意了,这个一定要添加在 %NVM_SYMLINK%之前,所以我们直接把它放到Path的最前面

最后我们新打开一个命令窗口,输入npm -v ,此时我们使用的就是我们统一下载的npm包了。

同样的我们还可以安装cnpm工具,它是中国版的npm镜像库,地址在这里:https://cnpmjs.org/,也是npm官方的一个拷贝,因为我们和外界有一堵墙隔着,所以用这个国内的比较快,淘宝也弄了一个和npm一样的镜像库,http://npm.taobao.org/,它和官方的npm每隔10分钟同步一次。安装方式:

npm install -g cnpm --registry=http://r.cnpmjs.org

或者用淘宝的npm install -g cnpm --registry=https://registry.npm.taoba.org

安装好了cnpm后,直接执行cnpm install 包名比如:cnpm install bower -g 就可以了。-g只是为了把包安装在全局路径下。如果不全局安装,也可以在当前目录中安装,不用-g就可以了。

五、nrm安装

什么是nrm?

nrm就是npm registry manager 也就是npm的镜像源管理工具,有时候国外资源太慢,那么我们可以用这个来切换镜像源。
我们只要通过这个命令: npm install -g nrm 就可以实现安装。

注意: -g可以直接放到install的后面,我们以后也最好这样用,因为这样用,我们可以在cmd中上下箭头切换最近命令的时候,容易修改,更方便操作。安装完成后,我们就可以使用了。

命令:nrm ls 用于展示所有可切换的镜像地址

命令:nrm use cnpm 我们这样就可以直接切换到cnpm上了。当然也可以按照上面罗列的其他内容进行切换。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
php跨域调用json的例子
Nov 13 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 #Javascript
手机端转换rem适应
Apr 01 #Javascript
ES6新特性之变量和字符串用法示例
Apr 01 #Javascript
ES5学习教程之Array对象
Apr 01 #Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 #Javascript
js实现音频控制进度条功能
Apr 01 #Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 #Javascript
You might like
如何将数据从文本导入到mysql
2006/10/09 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python有参函数使用代码实例
2020/01/06 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
枚举与#define宏的区别
2014/04/30 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
体育活动总结范文
2014/05/04 职场文书
妇女工作先进事迹
2014/08/17 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
大班下学期个人总结
2015/02/13 职场文书
闪闪红星观后感
2015/06/08 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python