暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

Meteor笔记(上):安装前的环境配置

麟十一 2021-02-10
971



写在前面



最近在研究GitHub上一个使用Meteor框架进行网页开发的开源项目,我原本计划地很好:第一步复现代码,第二步研究具体内容,第三步尝试改写,万万没想到算漏了一步,在第零步安装上就卡了两三天,并且掉进无数坑中  


提前说明,我最后成功安装Meteor所用的环境是Windows10-64bit,在Meteor笔记(下)结尾处也有一小部分内容适用于Linux和OS X系统上的安装,大家可以自行借鉴。


准备好了吗?踩坑记录开始了



1. 什么是Meteor



首先贴上官网链接:https://www.meteor.com 官网上对于Meteor的定义为:


"Meteor is an open source framework for seamlessly building and deploying Web, Mobile, and Desktop applications in Javascript."


简单来说,Meteor是一个开源框架,它构建在Node.js上,可以使用JavaScript开发实时网页程序。Meteor的优点在于模糊了客户端和服务器端的界限,可以使用JavaScript同时进行客户端和服务器端的开发,程序代码可以前后端共用。另外,由于Meteor位于数据库和用户界面之间,它还可以保证二者间数据的同步更新。


Meteor logo


等等,Node.js是什么?还是先贴上官网链接(中文版):https://nodejs.org/zh-cn/  下面是维基百科的定义:


"Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the Chrome V8 engine and executes JavaScript code outside a web browser."


Node.js是一个开源的、跨平台的后端JavaScript运行环境。换句话说,Node.js可以让我们使用JavaScript这样的前端语言在后端进行开发。因为Meteor构建在Node.js上,所以安装Meteor之前,需要先安装Node.js。


Node.js logo



2. 安装Node.js



理解了基本概念之后,可以进行Node.js的安装啦,这一步还是很简单的。登录官网的下载页面:https://nodejs.org/en/download/   选择合适的版本点击下载:


Node.js 下载页面


下载完成后在安装界面一路Next就可以,当然你可以自行更改安装路径


在其中一个安装页面中我们可以看到,Node.js,npm和npm modules的路径已经自动加入了环境变量之中,不需要我们再手动配置了:


Node.js 安装界面


还有一个界面会问你是否下载一些辅助工具,勾选了之后会安装Python,Visual Studio Build Tools,Chocolatey等插件,亲测安装时间会很久,而且有一些工具完全没有必要安装。另外,例如Chocolatey这样我们之后需要用到的工具,后文会展示如何一键安装,所以这里建议不勾选:


Node.js 安装界面


安装最后的界面如下,点击Finish就可以了:


Node.js 安装完成界面


安装完成之后,输入CMD进入命令提示符界面,输入node -vnpm -v就可以看到安装后的版本号了,如果成功显示版本号就说明Node.js和npm已经在电脑上安装成功:


Node.js 和 npm 的安装版本号


我们再检查一下环境变量,发现Node.js和npm所在的路径都已经自动加入了环境变量之中:


系统变量-PATH-Node.js安装路径


用户变量-PATH-npm安装路径


在这里停一下,npm是什么?为什么安装Node.js时会自动安装npm?Node.js安装成功后可以直接用吗?别急,接下来还需要配置一些内容,这些都与npm有关。


先简单介绍一下npm,官方文档在这里:https://docs.npmjs.com/  npm全称是Node Package Manager,它是JavaScript的包管理工具,也是Node.js平台的默认安装包工具。用户可以直接从npm服务器上下载别人编写的第三方包到本地,也可以将自己编写的包上传到npm服务器供别人下载,使用npm安装包可以省去安装过程中的很多步骤,操作非常方便


2.1 npm安装踩坑


注意,前方第一个坑出现了。事情是这样的,这一部分内容我原本已经写完了。但在我写Meteor笔记(下)的时候,我开始研究一个使用npm命令安装的开源包opentype.js,当时我还觉得之前安装的npm正好可以派上用场,结果就出现了无法加载包的问题,网上搜了各种办法也没解决。


再加上我当时配置环境的时候只是跟着教程一步一步走,没有了解具体原理,教程写错了我也没发现,报错之后我也不知道哪里出了问题,又该如何去修改。最终,在我一顿操作之后,无论输入什么npm命令,都会报错


输入任何npm命令都报错


这个错误怎么解决在后文会提到。总之,我当时为了解决这个报错问题研究了好久,最后也没改好。一气之下,我把Node.js和npm全部卸载重装,又把有关npm环境配置的问题仔细研究了一遍。在了解具体原理之后,我重新配置了npm环境,最终所有程序都可以成功运行了


所以这一部分不仅有环境配置的步骤,还有如此配置的原因。下面是更新后的部分。


2.2 两个概念区分


系统变量和用户变量有些电脑中会有很多个用户,比如用户A,用户B……每一个用户都有一个独立的互不干扰的用户变量,但所有用户都会使用同一个系统变量。一句话总结:系统变量对所有用户都有作用,用户变量只对当前用户有作用

如果程序的路径在系统变量的PATH中,那么所有用户都可以调用这个程序,如果系统变量被修改,所有用户都会受到影响。如果程序路径存放在用户A的用户变量PATH中,这个程序只能被用户A调用,用户B是无法调用的,如果用户A修改自己的用户变量,对于用户B来说没有任何影响。

全局安装和本地安装:使用全局安装的包会保存在C:\Users\用户名\AppData\Roaming\npm下,在电脑的任何位置都可以使用node进行调用,使用全局安装的命令为npm install 包名 -g。使用本地安装的包会保存在当前目录下新建的node_modules文件夹中,而且只能在当前目录下引用这个包,安装命令为npm install 包名

由于npm的默认安装路径在C盘下,随着运行的项目越来越多,可能会安装很多的依赖包,从而占据C盘的很多空间。为了减少占用C盘空间,一般我们都把npm全局安装包的路径(包括Node.js的路径)修改为D盘。当然,如果C盘够用或者不常使用npm的话,完全可以不修改路径

我当时就是在修改npm环境配置的时候出了错,所以在这里先列出按照npm默认路径安装和载入包需要配置什么内容,再列出如何修改路径和环境配置到D盘中,这样会比网上教程中又修改路径又修改环境配置的方法更清晰。


2.3 使用npm默认路径配置环境


先来看一下npm的默认路径,路径下有npm和npm-cache两个文件夹,npm中存放的是安装包内容,npm-cache存放的是缓存内容。如果没有使用npm安装过任何包,那么npm-cache这个文件夹不会出现。这里多说一句,AppData是隐藏文件夹,如果找不到的话,记得显示隐藏文件:


npm默认路径下的两个文件夹


我们先使用npm install opentype.js -g 命令全局安装一个包,注意这里不要安装一些教程中写的cluster包、http包,因为有一些包不需要安装就能载入,我之前就是安装了cluster包并且成功载入后以为自己配置成功了,结果在安装新包的时候才发现错误。


npm全局安装opentype.js


在上图我们还运行了一个命令npm root -g,用来查看全局安装包的路径。我们还可以使用另一个命令npm list -g输出已安装的全局安装包,命令后加--depth=0会只显示最外层的安装包,不显示具体的内部依赖:


输出默认路径下已安装的包


另外还有两个命令很有用,npm config get prefixnpm config get cache。这两个命令可以分别获取全局安装的路径以及缓存路径,这两个命令我们在后文中还会用到,命令中和get相应的set命令也会用到。


查看全局安装包路径和缓存路径


说完了有用的命令,回到安装过程中来。除去使用命令npm list -g查看已安装包的情况,在默认安装路径下新建的node_modules文件夹中也可以找到我们已经安装的包:


opentype.js安装包


需要注意的是,不是所有安装包都只有一个文件夹,拿opentype.js来说,除了上图的文件夹,在npm文件夹下还有一些支持opentype.js的文件:


opentype.js支持文件


刚刚的步骤我们只是成功下载了opentype.js这个包,如果需要载入包使用的话还是会报错。我们先在命令行中输入node进入Node.js命令交互界面,使用require()函数来尝试载入包:


载入opentype.js失败


上图显示错误“Cannot find module ‘opentype.js’ ”,这是因为NODE找不到安装包所在的路径。我们之前使用npm root -g命令查看全局安装包的路径时,可以看到路径是:C:\Users\用户名\AppData\Roaming\npm\node_modules,我们在环境变量中新建一个NODE_PATH变量,将变量值设置为刚才的路径。


新建系统变量NODE_PATH


这里出现了几个问题:


2.3.1 NODE_PATH的作用是什么?


每一个系统中环境变量都设置有PATH变量,Node.js和npm的路径也是被添加进PATH之后用户才可以通过命令行进行调用。当系统调用命令的时候,会在PATH变量保存的路径中寻找,如果有相应的路径就调用,没有就显示找不到命令。举个例子,删除Node.js在PATH中的路径之后再调用node就会发现如下报错:


删除PATH中Node.js的路径后调用node失败


NODE_PATH的作用就是NODE用来寻找全局安装包路径的环境变量。那NODE是如何寻找安装包的呢?理解这个问题需要了解一下NODE寻找和加载包的过程,在node交互命令界面使用module.paths命令可以输出NODE搜索安装包的具体过程,先展示未设置NODE_PATH时的过程:


未设置NODE_PATH时寻找安装包的过程


当我们使用require()函数载入包时,NODE会先在当前目录下的node_modules文件夹中寻找安装包,之后一直向上搜寻直到文件系统的根目录,再之后查找名为.node_modules和.node_libraries文件夹下的安装包,最后在Node.js安装路径下查找。因为我们全局安装包的路径不在搜索范围之内,所以会显示找不到模块。


如果我们在npm目录下运行node并查看寻找过程,就会发现NODE从当前目录--也就是npm目录下开始查找 ,我们安装的opentype.js的路径就是下图搜索目录的第二行,因为可以搜索到包,所以此时opentype.js模块也可以正确载入了:


npm文件夹下NODE寻找安装包的过程


所以在不设置NODE_PATH的时候,我们只能在有安装包的目录下才能成功载入包。而当我们设置了NODE_PATH之后,查找过程发生了改变。NODE在根目录下node_modules文件夹中查找之后,就会进入NODE_PATH设置的路径进行查找,这样在系统的任何位置就都可以成功找到并引用模块了:


设置NODE_PATH后寻找安装包的过程


2.3.2 为什么叫NODE_PATH? 


这个问题我其实一直很疑惑,之前还将变量名更换成NPM_PATH或者其他名称尝试过,但是更换名称之后就无法引用模块了。我在网上也没有搜到准确的解答,最后只能参照安装JAVA时需要设置的JAVA_HOME合理猜测,这应该是Node.js中的设置内容,默认叫做NODE_PATH。如果要修改名称,可能要在Node.js配置文件中进行修改。


2.3.3 为什么安装在系统变量之中?


最后一个问题有关NODE_PATH新建哪里。对于这个问题,如果电脑上只有一个用户,则设置在哪里都不影响使用,如果电脑上有多个用户,建议连同Node.js的路径一起放在用户变量中


上文我将NODE_PATH安装在了系统变量之中,而Node.js安装路径也在系统变量中,这就意味着这台电脑上的所有用户都可以使用Node.js并且使用npm下载和引用包;如果全部放在用户变量中,则只有当前用户可以使用,其他用户无法使用。所以说建议把这些文件的路径都统一放在系统变量或者用户变量之中。一方面是方便文件路径管理,另一方面也是建立一种良好的习惯。


到这里为止,使用npm默认路径配置环境的步骤就结束了,总结一下其实非常简单:下载Node.js之后在系统变量(或用户变量)中新建NODE_PATH,并将变量值设置为C:\Users\用户名\AppData\Roaming\npm\node_modules就可以了


2.4 修改npm安装路径及环境配置


有了上文的铺垫,这一部分会变得清晰很多。第一步是修改npm的全局安装包路径和缓存路径,为了文件管理更方便,可以将这两个路径都设置在Node.js路径下,当然也可以设置成其他路径。


在Node.js路径下新建两个文件夹node_globalnode_cache,想换其他名字也可以。


Node.js目录下新建两个文件夹


还记得我们曾经用过npm config get prefix和npm config get cache这两个命令吗?接下来使用相对应的两个命令修改路径:


第一条命令是npm config set prefix "D:\Program Files\nodejs\node_global",引号内记得改成自己的安装路径。运行之后可以使用npm root -g命令查看全局安装路径是否已经改变。另外,打开C:\Users\用户名\.npmrc文件可以看到新的配置命令已经被写入。这个文件和npm_cache一样需要有相关操作之后才会出现,使用默认设置是不会创建的。


修改全局安装路径


之后运行npm config set cache "D:\Program Files\nodejs\node_cache" 命令修改缓存路径,修改完打开.npmrc文件可以发现路径也已经被添加进去了:


修改缓存路径


这里提一下我最开始遇到的那个错误(无论输入npm的什么命令都会报错)解决方法就是找到.npmrc文件并修改prefix和cache路径。不过我当时在安装时还存在另一个错误,就是将NODE_PATH中的变量值设置成了nodejs\node_modules,而正确路径应该是nodejs\npm_global\node_modules。所以即使更正了.npmrc文件中的错误,还是无法加载安装包。


设置完新路径之后,使用npm list -g检查一下新路径下安装包的内容,一般来说都会显示为空,因为我们在新的路径下还没有安装任何的包:


检查新路径下的安装包内容


第二步在环境变量中修改NODE_PATH的变量值,将其改为npm root -g命令得到的路径 D:\Program Files\nodejs\node_global\node_modules


修改NODE_PATH变量值


第三步可以修改npm默认的全局安装路径,将之前的默认路径C:\Users\用户名\AppData\Roaming\npm改为我们新建文件夹node_global的路径:D:\Program Files\nodejs\node_global\(在这里我把路径从用户变量转移到了系统变量中,请参照上文自行决定是否转移):


修改npm默认的全局安装路径


以上重写部分结束。到这里为止,Node.js环境才算是完全配置好了,你以为这就可以安装Meteor了吗?别急+1,还有一步。



3. 安装Chocolatary



当配置完Node.js之后,打开Meteor官网首页 https://www.meteor.com/ 点击install进入下载页面:


Meteor 官网首页


原以为会看到各类下载包之类的内容,没想到install页面如此的简洁。。。只有一行命令行而已


Meteor 官网INSTALL页面


如果你使用的是OS X或者Linux系统,那么就可以直接输入命令进行安装了(当然也不是输入了命令就安装的上,具体内容下一篇详解)


如果你使用的是Windows系统,那需要先安装Chocolatey那么问题来了,Chocolatey又是什么?


莫慌,这个其实很好理解,Chocolatey是Windows平台上的包管理器,我们可以通过输入命令行的方式安装包。官网在这里:https://chocolatey.org/  另外,Chocolatey的logo还可可爱爱的


Chocolatey logo


安装Chocolatey的方法有两种,一种是在Windows PowerShell中输入命令安装,一种是输入CMD在命令提示符界面使用命令行安装,两种方式都要以管理员身份运行程序安装命令界面的链接在这里https://docs.chocolatey.org/en-us/choco/setup#more-install-options 也可以在后文中直接复制粘贴


Chocolatey 安装命令界面


使用cmd.exe安装:输入CMD之后不要着急点开,在“命令提示符”选项上右键,选择“以管理员身份运行”,输入以下命令进行安装:


@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"


使用PowerShell.exe安装:Windows+x键之后选择“Windows PowerShell(管理员)”,输入以下命令进行安装:


Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))


如果安装不成功,可能需要搭梯子 安装完成之后,在命令提示符界面输入choco -v查看Chocolatey的版本号,如果成功显示则表示Chocolatey已经安装成功:


Chocolatey 版本号


到这里,安装Meteor之前需要的环境配置才算全部完成,撒花 下一篇正式开始安装Meteor~



~END~


文章转载自麟十一,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论