前端自动化开发之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 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 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
9个实用的PHP代码片段分享
2015/01/22 PHP
php英文单词统计器
2016/06/23 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
怎么处理XML的中文问题
2015/03/26 面试题
自荐信的两点禁忌
2013/10/30 职场文书
拉歌口号大全
2014/06/13 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
建党伟业观后感
2015/06/01 职场文书
2016七夕情人节感言
2015/12/09 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python