第一章:React环境配置之Node.js与npm/yarn
前言:
在开始写这篇攻略之前,简单说明一下思路,因为React的前置环境较多,与传统H5编写方式差别较大,且有新类型文件格式等内容,所以,在写正式写React之前,我将按你即将接触到的工具或者技术来编写整个React开发过程,已避免速学课中出现那种,看不懂,这是什么?还能这么写?这不是前端吧?等等类似的问题!请静下心来,我们从底层,原理,一步步分析解析,这样后面到react技术栈的时候,你就不会因为出现大量未知的写法,插件,文件类型等等这些东西而崩溃!
相信我,我当初直接被带入React的时候,完全处于蒙的状态,后来下定决心,针对每一个内容和顺序进行文档查阅(包括搭环境);才有了今天的攻略!
[Node.js]的安装和配置
介绍:
Node.js:使javascript能够脱离浏览器运行的一种技术,他是非阻断异步I/O事件驱动的javascript运行环境.基于Google的V8引擎,特点是速度快,性能好.
Node.js一般服务器用不到,但是在开发时需要,这是因为npm,yarn等工具和插件是基于node.js.Node.js与我们熟悉的Farmework一样且同级别,只不过是javascript的运行时,而后者C#的运行时.后端是否需要node.js取决于你的后端程序是否是JavaScript提供的,还是其他语言提供.前者的话,就需要使用node.js
*本次教程采用的是C#语言,所以后端不需要安装node.js
安装后配置
- 改变默认的全局安装和缓存文件目录
- 说明：
这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\nodejs】下创建两个文件夹【node_global】及【node_cache】
- 命令
WIN+R 输入CMD npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"
- 设置系统环境变量
- 说明:
修改node.js的默认全局和缓存文件可能会导致安装时默认安装的环境变量发生改变,确保node可正常使用,最好修改一次环境变量
- 系统环境变量
新建:NODE_PATH
值为: D:\nodejs\node_global\node_modules
- 用户环境变量
修改或追加 Path
值为:D:\nodejs\node_global
- 参考文献
NPM的安装和使用
-
是什么
包/插件依赖管理工具,快速.安全.便捷的获取社区(一般指GitHub)共享的插件服务
-
为什么用
还记以前你是怎么导入jQuery,BootStrap,Layui,EsayUI等等等等这些插件的吗?先下载,在放在项目目录一个叫js的文件夹下,对吗?你能说出怎么使我引入的layer或者别的插件,以最小的体积和功能完成一个单独的页面的功能需求吗?
现在我告诉你用10秒钟,就可以不上插件官网不用下载,不用在项目创建存储js的文件夹,且在使用的时候可以选择性的只使用我需要的功能模块,你用不用?
这就是npm/yarn的强大功能,配合ES6会按照你的需要,帮你组织,合并你需要的功能,用就完了,再也不用担心会不会兼容,写一些模块初始了.这些都交给npm/yarn和ES6去完成吧! -
怎么用
- 安装
安装Node.js时,已经同步安装NPM - 加载(以Antd为例)
npm install Antd- 使用
import { Input, Form ,Table} from "antd";//筛选引用antd插件中的Input, Form ,Table三个模块- 文献
NPM是干什么的
本次项目并不使用npm,我们使用Yarn代替NPM
- 安装
Yarn和NPM的对比
- 是什么
和npm一样,是一种依赖管理工具,用法上有细微差别
- 对比npm的优势
- 支持:Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具
- 速度:加载速度比NPM更快.
- 方式:Yarn是并行安装,NPM是串行安装.(即多个包时同时安装,而不是串行的依次安装,install命令时,效果显著)
- 一致性:团队开发时,保持团队项目插件安装一致性,(npm也推出了此功能,但坊间据传不够稳定)归功于yarn.lock文件的版本锁定.
- 多注册来源处理:所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
- 某些时候会出现NPM加载不上的问题.
- 对比npm的语法
Yarn命令集 功能 NPM命令集 yarn add [package]添加单个组件 npm install [package]yarn init初始化项目 npm inityarn install安装所需所有依赖 npm installyarn run [script]运行脚本 npm run [script]yarn list查看所有依赖 npm list或npm lsyarn remove [package]移除单个包 npm uninstall [package]yarn importnpm项目转yarn项目 无yarn upgrade [package]更新包 yarn update [package]global注释-全局安装 -g或--global默认自带--save注释-安装到生产环境 --save--dev注释-安装到开发环境 --dev - 命令无效
有时候我们在敲命令时偶尔会出现敲了却没反应,那就要检查一下你的配置和命令是否正确了
- 请注意 -yes-dev-private等等这些命令都是错误的.
- 规则:
- -适用于缩写,栗子: -y-d-p-yp
- --适用于全称,栗子--yes--dev--private--yes--private
- yarn中没有 -g若要声明时全局安装请使用 global参照语法表格
- 如: yarn global add [package]
- 参考文献:Yarn语法CLI
- 若是语法正确仍然无效,请查看下章的Yarn的安装和配置
Yarn的安装和配置
- 安装方式
- 推荐官网的安装程序客户端方式安装
- 安装后,需将安装目录下的bin文件夹添加到系统环境变量中
例如:G:\Yarn\bin\
- 常用配置检查命令
yarn config get global-folder #获取配置中的yarn的模块全局安装目录 yarn config get cache-folder #获取配置中的yarn的模块缓存目录 yarn global bin #查看yarn的当前bin目录 yarn global dir #查看yarn的全局模块安装目录 yarn bin #yarn的非全局模块安装目录 yarn dir #无此命令 #正确配置时 #yarn config get global-folder应当和yarn global dir所指路径一致 #yarn config get cache-folder应当和yarn config get global-folder同在一个父文件夹下 #yarn bin应当为你当前项目的根路径\node_modules\.bin #yarn global bin应当为你node.js的安装目录下node_global\bin(前面nodejs章节配置的目录) - 常用配置命令
yarn config set global-folder "Yarn安装目录\global" #设置模块全局安装目录 yarn config set cache-folder "Yarn安装目录\cache" #设置模块全局缓存目录 #设置以上完成后,打开C盘的当前用户下的.yarnrc文件,使用VSCode打开后,对比参数设置,需和刚才的设置一致 #在设置global目录后在创建模块时会自动创建node_modules\.bin目录,将此目录添加到系统环境变量中. #举个栗子:我的全局安装目录为G:\Yarn\global,那么我的环境变量就是G:\Yarn\global\node_modules\.bin. #注意,在设置完全局安装目录后,如果没有使用,可能看不到这个目录,因为nodejs还没有执行过安装,但并不影响你手填这个环境变量的目录 - 参考文献
OK,这章就先到这里,别看只有一个node.js及npm/yarn,在react中使用频率是非常频繁的,且非常重要,内容也并不仅仅是今天看到的那么多,更多的需要大家根据项目和其他文档针对性的使用!
浙公网安备 33010602011771号