【前端工程化】篇一 扬帆起航:开发环境

1,511 阅读8分钟

字数:2553, 阅读时间:7分钟,点击阅读原文

雄关漫道真如铁,而今迈步从头越。 ——毛泽东《忆秦娥·娄山关》

前言

老丈人爱吃核桃,昨天买了点陪媳妇儿送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:“你还用锤子,你看我用手就成”。我嘴一抽,来了句:“人和动物最大的区别就是人会使用工具”……

虽然是个笑话,但是说得非常有道理的。人类从以前的石器时代到现在的信息科技时代,汽车代替了马车,手机代替了书信,计算器代替了结绳计数,这不正是一个工具迭代的过程吗?固古有名言“工欲善其事,必先利其器”,可见工具在我们生活中扮演着一个重要的角色。

前端发展到今天,早已脱离了刀耕火种,新时代的前端一定要学会使用工具来提高开发效率。

工程化的概念其实很久之前就诞生了,不过由于技术的限制,前端并没有合适的工具可用。nodejs的出现,开启了前端工程化的篇章,一大波的构建工具如雨后春笋,先是grunt盛极一时,随后gulp凭着简洁的api和超快的构建速度将grunt踩在脚下,再后来webpack出现了,和之前的构建工具不同,它更加关心模块及其依赖关系,拥有强大的扩展能力,一时间受到了广大开发者的追捧,虽然后来parcel的出现也引起了不小的轰动,但终未掀起大风浪,webpack依旧稳坐王座,大有一统天下之势。

现在前端的构建工具体系已经非常成熟和完善,用好这些工具,不仅可以少掉几根头发,还可以打打王者、泡泡妹子(如果你有的话)......

前端工程化即将前端开发流程自动化、规范化、工具化、智能化,通过规范和工具来提升应用质量,提高开发效率。

此系列文章主要是对前端工程化方面的知识做个梳理,由于作者能力有限,所以并不能完全保证知识的完备性和正确性,如有不足之处,敬请指正。

内容安排如下(后期可能会不定时更新):

image-20201013125213331

开发环境

千里之行,始于足下,我们就以搭建开发环境作为这系列的开篇吧。当然,由于每个人的操作系统、使用习惯都不一样,内容仅做参考。

NVM:给nodejs找到归属

nvm全称Node Version Manager,是 Nodejs 的版本管理器。由于有些老项目使用了较低版本的nodejs,版本之间的兼容性问题又不能让你轻易升级,而新的项目又需要使用新的版本,这就需要一个方便进行Nodejs版本切换的工具,这即是nvm的工作(类似的工具还有n,这里只介绍nvm)。

nvm的官方版本只支持Linux和 Mac。 Windows用户,可以用nvm-windows。详情请查看官方说明

在使用nvm安装node之前,请确保之前安装的nodejs已卸载,以免冲突。

安装和使用

  1. 下载nvm包。下载地址:nvm-windows下载,选择nvm-setup.zip下载完成后进行安装,建议安装到一个特定的目录中,后续所有其他开发工具也会安装到此目录中,这里我安装到D:\development\nvm
  2. 安装成功后,可以设置一下node和npm的安装源,换成淘宝的要快一些:
 nvm npm_mirror https://npm.taobao.org/mirrors/npm/
 nvm node_mirror http://npm.taobao.org/mirrors/node/

也可以自己在安装目录下的settings.txt文件中修改:

  root: D:\development\nvm   
  path: D:\development\nodejs 
  arch: 64                    
  proxy: none         
  node_mirror: http://npm.taobao.org/mirrors/node/ 
  npm_mirror: https://npm.taobao.org/mirrors/npm/  

说明:

root:设置nvm目录
path:设置nodejs安装目录
arch:架构,64位或者32位
proxy:代理
node_mirror:安装node使用的镜像源,设置成淘宝的比较快
npm_mirror:安装npm使用的镜像源,设置成淘宝的比较快
  1. 设置环境变量,正常情况下会在环境变量的系统变量中,生成两个环境变量:NVM_HOMENVM_SYMLINK ,确保这两个变量存在且NVM_HOME的变量值为:D:\development\nvmNVM_SYMLINK的变量值为:D:\development\nodejs,然后在Path中确保引用了这两个环境变量,如 %NVM_HOME%%NVM_SYMLINK%

  2. 在终端输入命令:nvm version ,查看当前nvm的版本信息。如果正常显示版本号,说明安装成功,否则需要检查以上安装配置是否正确。

  3. 继续输入命令:nvm install latest, 如果网络畅通,会看到正在下载的提示,即会安装最新版本的node。

  4. 如果是第一次下载,在use之前,D:\development目录下是没有nodejs这个文件夹的,在输入比如: nvm use 12.16.0 之后,在D:\development目录下便会创建一个nodejs文件夹,这个文件夹是一个快捷方式,指向了D:\development\nvm里的v12.16.0(即当前使用的版本)文件夹。

如果是Mac用户的话,比较简单,直接使用Homebrew进行安装就好,也可以参考官方文档进行安装。

注意:在mac上全局安装的包是在每个node版本的文件夹下(官方的说法是为了保证全局包和node版本的兼容性),所以使用nvm安装了新的版本会导致原来的全局包不可用。如果想将原来的全局包重新在新版本中安装一次,可以使用以下命令:

# 加上 --reinstall-packages-from=current
nvm install latest --reinstall-packages-from=current

常用命令

nvm install # 安装指定版本,可模糊安装,如:安装v6.2.0,既可nvm install v6.2.0,又可nvm install 6.2
nvm uninstall # 删除已安装的指定版本,语法与install类似
nvm use # 切换使用指定的版本node
nvm ls # 列出本地所有安装的版本

NPM配置

在上面,如果用nvm安装了nodejs,那么同时也会安装npm。如果希望npm安装的全局包也放在D:\development下,可以使用以下命令设置:

npm config set prefix "D:\development\npm"  ## 设置全局模块安装目录
npm config set registry https://registry.npm.taobao.org  ## 设置镜像为淘宝
npm config set cache "D:\development\npm_cache" ## 设置缓存目录,默认会在C盘,可以修改到其他盘

可以查看用户目录下的.npmrc文件是否包含如下内容,确认是否设置成功。

prefix=D:\development\npm
registry=https://registry.npm.taobao.org

另外,需要在系统环境变量配置NPM_HOME,变量值为D:\development\npm,然后在Path中引用该变量;%NPM_HOME%;,需要确保放在%NVM_SYMLINK%前面。

此时,如果安装一个全局模块,就会被安装到上面设置的目录中了。

NRM:给npm插上翅膀

nrm(npm registry manager )是npm的镜像源管理工具,由于国外源太慢,可以用这个工具来切换镜像源。

  1. 全局安装nrm:npm install -g nrm

  2. 安装后就可以使用nrm的相关功能,列出可使用的资源:nrm ls,会显示如下内容:

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  1. 选择需要的源:
nrm use taobao   # 切到淘宝

nrm切换源不仅可以作用于npm,而且对yarn也是有效的。当然还有些其他方案,比如用cnpm代替npm,个人是不建议这样做的,因为有时候会出现一些诡异的问题。

另外,如果在我们开发中,发现某些模块安装总是失败或者很慢,如node-sasselectronchrom等,我们可以手动将安装源设置为淘宝的地址:

打开用户目录的.npmrc或者在项目根目录创建.npmrc,然后配置安装源。

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://cnpmjs.org/downloads
electron_mirror=https://npm.taobao.org/mirrors/electron/
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

其他模块的地址请自行在淘宝npm镜像中查找

NPM-CHECK:给模块找到未来

这个工具主要是用来检测npm包版本的,支持全局模块和项目中的模块,具体可查看官方文档

  1. 安装:npm i -g npm-check

  2. 检查包: npm-check -g -u

    说明:

    • -g(--global)参数表示更新全局模块,同理还可以是-p(dependencies依赖),-d(devDependencies依赖)设置检查范围
    • -u(--update)参数表示检查有更新的模块
8c600cd8-4f48-11e5-8757-9387a7a21316
8c600cd8-4f48-11e5-8757-9387a7a21316
  1. 从列出有更新的包列表中,按空格进行选择,按上下方向键进行光标移动,按回车将更新所有选择项。

其他用法:

npm update <name> -g # 更新某个全局包
npm update -s # 跳过没有使用的包

ZSH:做个颜值派

作为一个颜控来说,一个好看的终端是非常重要的。先贴下战果:包含界面美化、git信息、自动补全和命令提示。

image-20200614175654329
image-20200614175654329

由于这部分内容比较简单,且网上教程较多,就偷个懒直接贴教程地址。

Windows 终端 Powerline PowerShell
Windows 终端 Powerline PowerShell

结语

开发环境搭建这块没有最佳实践,符合自己的使用习惯,简单实用就好。这里仅记录一下,方便以后在需要重新搭建环境的时候参考。