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

相信任何学开发的,不管学什么语言,老师都这样讲过,作为一名开发人员,你最大的精力应该是放在创造力上面,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上了。当然也可以按照上面罗列的其他内容进行切换。

总结

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

前端自动化开发之Node.js的环境搭建教程的更多相关文章

  1. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  3. Node.js调试技术总结分享

    Node.js是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome's JavaScript runtime,也就是说,实际上它是对Google V8引擎(应用于Google Chrome浏览器)进行了封装。 今天介绍Node.js调式目前有几种技术,需要的朋友可以参考下。

  4. node.js实现http服务器与浏览器之间的内容缓存操作示例

    这篇文章主要介绍了node.js实现http服务器与浏览器之间的内容缓存操作,结合实例形式分析了node.js http服务器与浏览器之间的内容缓存原理与具体实现技巧,需要的朋友可以参考下

  5. 教你如何使用node.js制作代理服务器

    本文介绍了如何使用node.js制作代理服务器,图文并茂,十分的详细,代码很简洁易懂,这里推荐给大家。

  6. node.js中的fs.openSync方法使用说明

    这篇文章主要介绍了node.js中的fs.openSync方法使用说明,本文介绍了fs.openSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下

  7. Node.js+ELK日志规范的实现

    这篇文章主要介绍了Node.js+ELK日志规范的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. node.js爬虫框架node-crawler初体验

    这篇文章主要介绍了node.js爬虫框架node-crawler的相关资料,帮助大家利用node.js进行爬虫,感兴趣的朋友可以了解下

  9. node.js中的fs.existsSync方法使用说明

    这篇文章主要介绍了node.js中的fs.existsSync方法使用说明,本文介绍了fs.existsSync方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下

  10. 说说如何利用 Node.js 代理解决跨域问题

    这篇文章主要介绍了Node.js代理解决跨域问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部