(前端工程化00)磨刀篇-开发环境搭建

字数:1913, 阅读时间:5分钟,点击阅读原文

点击查看源网页

前言

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

虽然是个笑话,但是我觉得还是非常有道理的,人类从最初的石器时代到现在的科技时代,本质都是工具的提升,固古人才有“工欲善其事,必先利其器”的至理名言。

前端发展到现在,早已脱离了刀耕火种的时代,新时代的前端要使用工具来提高我们的开发效率。

工程化的概念很久之前就诞生了,但是因为nodejs的出现,让前端工程化的正式兴起,一大波的构建工具如雨后春笋,先是grunt盛极一时,然后gulp凭着简洁的api和超快的构建速度将grunt踩在脚下,随后webpack出现了,和之前的构建工具不同,webpack不关心文件,只关心模块及其依赖,它受到了广大开发者的追捧,虽然后来parcel的出现也引起了不小的轰动,但终究是昙花一下,webpack大有一统天下之势。

现在构建工具已经非常成熟,也非常完备,我们何不合理用之,把多余的时间留给王者、留给妹子、留给春花雪月......

分享这系列的文章一是梳理一下相关的知识以做巩固,二是团队分享使用,如有错误之处,欢迎指正。

整个内容安排如下:

TIM截图20200513234447

开发环境

千里之行,始于足下,为了保证后续的内容能够顺利进行,我们首先来搭建一套开发环境。当然,如果在实际的开发中也是建议使用的,如果一个团队中,大家都使用了相同的开发环境,我相信在寻求别人帮助的时候,就能免除环境的干扰。

接下来,我们就开始吧!

NVM

nvm全称Node Version Manager,是 Nodejs 版本管理器,可以对Nodejs的版本进行切换。类似的工具还有n,这里只介绍nvm。 nvm的官方版本只支持Linux和 Mac。 Windows用户,可以用nvm-windows。详情请查看官方说明

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

安装和使用

  • 下载nvm包。下载地址:nvm-windows下载,选择nvm-setup.zip下载完成后进行安装,建议安装到一个特定的目录中,后续我们的所有其他开发工具也会安装到此目录中,这里我安装到D:\development\nvm
  • 安装成功后,会在C盘的根目录或者安装目录生成一个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使用的镜像源,设置成淘宝的比较快```
  • 设置环境变量,正常情况下会在环境变量的系统变量中,生成两个环境变量:NVM_HOMENVM_SYMLINK ,确保这两个变量存在且NVM_HOME的变量值为:D:\development\nvmNVM_SYMLINK的变量值为:D:\development\nodejs,然后在Path中确保引用了这两个环境变量,如 ;%NVM_HOME%;%NVM_SYMLINK%;

  • 在终端输入命令:nvm version ,查看当前nvm的版本信息。如果正常显示版本号,就可以安装nodejs了,否则需要检查以上安装配置是否正确。

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

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

    如果是Mac用户的话,直接使用Homebrew进行安装就好,也可以参考官方说明进行安装。

常用命令

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"

可以查看用户目录下的.npmrc文件是否包含内容prefix=D:\development\npm

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

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

NRM

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

  • 全局安装nrm:npm install -g nrm
  • 安装后就可以使用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/
  • 选择淘宝的源:nrm use taobao

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

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

    • 打开用户目录的.npmrc

    • 加入要设置的源

      sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"=true
      electron_mirror "https://npm.taobao.org/mirrors/electron/"=true
      chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"=true
      

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

NPM-CHECK

这个工具我主要是用来更新全局模块的,当然它的功能不止如此,类似的工具也有很多,我这不赘述,只演示以下如何更新全局模块,具体可查看官方文档

  • 安装:npm i-g npm-check

  • 更新: npm-check -g -u-g参数标识全局,-u--update标识更新

    npm-check -g -u

此时,会列出有更新的模块,按空格进行选择,按上下方向键进行移动光标,按回车将更新选择项。

愿你走出半生,归来仍是少年