菜单

js_脚本之家www.2138.com

2020年3月19日 - www.2138.com

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

NVM安装

nvm(nodejs version manager)是nodejs版本管理工具。

下载 nvm 包
地址:https://github.com/coreybutler/nvm-windows/releases

下载完成后解压,比如: D:devnvm
里面的文件列表是这样的:elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe

管理员权限双击
install.cmd,直接回车,成功后,会在C盘的根目录生成一个settings.txt的文本文件,并且会在环境变量的系统变量中,生成两个环境变量:NVM_HOMENVM_SYMLINK

修改settings.txt文本文件

root:D:devnvm

path:D:devnodejs

arch: 64

proxy: none

再修改这两个变量名的变量值:NVM_HOME的变量值为:D:devnvm;NVM_SYMLINK的变量值为:D:devnodejs

在Path的最前面输入:;%NVM_HOME%;%NVM_SYMLINK%;

打开一个cmd窗口输入命令:nvm v,那么我们会看到当前nvm的版本信息。

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

NodeJS安装

输入命令:nvm install
latest如果网络畅通,我们会看到正在下载的提示,下载完成后
会让你use那个最新的node版本。

下载其他版本的nodejs,这样通过命令:nvm use 版本号比如:nvm use
5.11.0就可以轻松实现版本切换了。

备注: 如果你的电脑系统是32
位的,那么在下载nodejs版本的时候,一定要指明 32 如:nvm install 5.11.0
32这样在32位的电脑系统中,才可以使用,默认是64位的。

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

NPM安装

NPM( nodejs package manager) 也就是nodejs的包管理工具。

在每个版本的nodejs中,都会自带npm,为了统一起见,我们安装一个全局的npm工具,这个操作很有必要,因为我们需要安装一些全局的其他包,不会因为切换node版本造成原来下载过的包不可用。

首先我们进入命令模式,输入npm config set prefix
“D:devnvmnpm”回车,这是在配置npm的全局安装路径,然后在用户文件夹下会生成一个.npmrc的文件

然后继续在命令中输入:npm install npm -g 全局安装npm

我们为这个npm配置环境变量: 变量名为:NPM_HOME,变量值为
:D:devnvmnpm,在Path的最前面添加;%NPM_HOME%,注意了,这个一定要添加在%NVM_SYMLINK%之前,所以我们直接把它放到Path的最前面

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

npm install -g cnpm –registry=

或者用淘宝的

npm install -g cnpm –registry=

安装好了cnpm后,直接执行cnpm install 包名

比如:cnpm install bower -g

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

NRM安装

nrm(npm registry manager) 也就是npm的镜像源管理工具

npm install -g nrm

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

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

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

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

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

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

root: C:devnvm path: C:devnodejs arch: 64 proxy: none 

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

然后我们配置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:devnvmnpm"
回车,这是在配置npm的全局安装路径,然后在用户文件夹下会生成一个.npmrc的文件,用记事本打开后可以看到如下内容:prefix=C:devnvmnpm

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

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

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

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

同样的我们还可以安装cnpm工具,它是中国版的npm镜像库,地址在这里:

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上了。当然也可以按照上面罗列的其他内容进行切换。

总结

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图