update: Node.js 环境配置

This commit is contained in:
qianguyihao 2020-04-13 19:00:31 +08:00
parent 83c641b22c
commit d6b0277f05
9 changed files with 265 additions and 119 deletions

View File

@ -85,12 +85,14 @@ JavaScript运行在用户的终端网页上而不是服务器上所以我
JavaScript基础分为三个部分
- ECMAScriptJavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- **ECMAScript**JavaScript **语法标准**。包括变量、表达式、运算符、函数、if语句、for语句等。
- **DOM**Document Object Model文档对象模型操作**页面上的元素**的API。比如让盒子移动、变色、改变大小、轮播图等等。
- **BOM**Browser Object Model浏览器对象模型操作**浏览器部分功能**的API。通过BOM可以操作浏览器窗口比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
通俗理解就是ECMAScript 是 JS 的语法DOM 和 BOM 浏览器运行环境为 JS提供的API。
## JavaScript 的特点
### 特点1解释型语言

View File

@ -1,11 +1,14 @@
## Node.js的介绍
### 什么是 Node.js官方解释
Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型( Node.js的特性使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。
Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型( Node.js的特性使其轻量级又高效。
Node.js 的包管理器 npm 是全球最大的开源库生态系统。
![](http://img.smyhvae.com/20180301_1540.png)
@ -16,6 +19,7 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
- 通过自行开发的 libuv 库,调用操作系统资源。
### 什么是 Node.js非官方解释
**Node.js是 JavaScript 语言在服务器端的运行环境(平台)**。Node.js 不是一门语言,也不是 JavaScript 的框架。
@ -32,7 +36,13 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
- 其次Node 生态系统活跃,提供了大量的开源库,使得 JavaScript 语言能与操作系统进行交互比如读写文件、新建子进程在这个层次上Node 又是属于 JavaScript 的工具库。
### 为什么要学习服务器端开发
## Node.js和服务器端开发
> 在这一段,“服务器端开发”和“后台开发”是一个概念。
### 前端同学为什么要学习后台开发
- 了解前后端交互流程。
- 能够和后台开发的程序员更佳紧密地结合、更顺畅地沟通。
@ -40,14 +50,55 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
- 拓宽知识视野和技术栈,能够站在全局的角度审视整个项目。
### 为什么选择 Node.js 做后台开发
### 为什么选择 Node.js 做后台开发Node.js的优势
- 使用 JavaScript 语言 开发服务器端应用
1、使用 JavaScript 语言开发服务器端应用,**便于前端同学上手**(一些公司甚至要求前端工程师掌握 Node.js 开发)
- 一些公司要求前端工程师掌握 Node.js 开发
2、**性能高**。AO操作的性能可能没有优势但运算方面的性能不错
- Node.js 生态系统活跃,提供了大量的开源库
3、**有利于和前端代码整合**,甚至共用部分代码
比如说,针对接口返回的各种字段,前后端都必须要做校验。此时,如果用 Node.js 来做后台开发的话,前后端可以共用校验的代码。
4、Node.js 生态系统活跃,提供了大量的开源库。
**思考**:限制语言能力的不是语言本身,而是语言的运行环境(平台)。
### Node.js 的用途
**1、中间层**。
前端访问中间层,中间层再访问后台的 Java/C++ 服务。这样做的好处是:安全性(不会把主服务器暴露在外面)、提高性能(做缓存等)、降低主服务器的复杂度。
当然,有时候做 Node.js 开发,是因为:后台人力不够,所以把后台开发的一部分工作量,转移给前端同学。
**2、公司内部工具**。
**3、小型服务**(比如管理系统)。
需要声明的是Node.js很难像 Java/C++ 那样,成为后台的主力开发语言。这并非是因为 Node.js的性能问题实际上Node.js的性能还不错主要是因为Node.js的框架的支持度不够很难独立成为后台开发语言。
### Node.js 的组成
我们知道JavaScript 的组成分为三个部分:
- ECMAScript
- DOM
- BOM
ECMAScript 是 JS 的语法DOM 和 BOM 浏览器运行环境为 JS 提供的API。
而 Node.js 的组成分为:
- **ECMAScript**。ECMAScript的所有语法在Node环境中都可以使用。
- **Node 环境**提供的一些**附加API**(包括文件、网络、路径等等 API)。
如下图所示:
![](http://img.smyhvae.com/20200409_1545.png)
## Node.js的发展
@ -79,6 +130,7 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
- I/O阻塞
### 知名度较高的Node.js开源项目
![](http://img.smyhvae.com/20180301_2009.png)
@ -100,9 +152,6 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
- socket.io实时通信框架。
### Node.js的特点
- 单线程
@ -120,17 +169,30 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。
注意我们以一定要用偶数版V4、V6等)不要用奇数版比如V5因为奇数版不稳定。
我们并不推荐直接采用 Node.js.msiwindows或者 Node.js.pkgMac 安装包进行安装,原因如下:
后续如果需要安装其他版本,可以这样做:重新下载最新的安装包,覆盖安装即可。
但我们并不推荐直接采用 Node.js.msiwindows或者 Node.js.pkgMac 安装包进行安装,因为会产生如下问题。
- 不方便 Node.js 版本的更新;
**通过 Node.js 安装包产生的问题**
- 无法回滚到之前的版本;
- 安装新版本时,以前版本安装的很多全局工具包,需要重新安装。
- 无法在多个版本之间切换(在有些项目中,我们要使用 Node 的指定版本)。
- 无法回滚到之前的版本。
- 无法在多个版本之间切换(很多时候我们要使用特定版本)
因此,我们暂时先不用安装 Node.js稍后用 NVM 的方式来安装 Node.js。
### Node.js 版本常识
- 偶数版本为稳定版0.6.x 0.8.x 8.10.x
- 奇数版本为非稳定版0.7.x 0.9.x 9.11.x
- LTSLong Term Support
参考链接:[node.js中LTS和Current的区别](https://blog.csdn.net/u012532033/article/details/73332099)
## Node.js 运行环境配置:通过 NVM推荐
@ -300,7 +362,7 @@ nvm install 8.10.0
## NVM 的常用命令
> 注意,这一段说的是 NVM 的常用命令,不是 Node 常用命令。
> 注意,这一段说的是 NVM 的常用命令,不是 Node 常用命令。
查看当前使用的 nvm 版本:
@ -454,7 +516,6 @@ NVM、Node、NPM 安装之后,目录分布如下:
$ npm install npm -g
```
### 配置 NPM 的全局目录(暂略)
NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。
@ -466,32 +527,77 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议
### NPM的常用命令
- npm init --yes
查看 npm 当前版本:
项目的初始化。执行完成后,会生成`package.json`文件。
```bash
npm -v
```
- npm install [package]
更新 npm
只在当前工程下安装 package。
```bash
npm install npm@latest -g
- npm install -g [package]
```
在全局环境下安装 package。
项目初始化:(执行完成后,会生成`package.json`文件)
- npm run [script]
```bash
npm init
npm init --yes 默认配置
```
只在当前工程下安装指定的包:
```bash
npm install [package]
```
在全局阿浑惊吓安装指定的包:
```
npm install -g [package]
```
## 配置 npm 镜像源
由于 npm 默认的下载地址在国外npmjs.com有时候会被墙导致无法下载或者下载很慢。因此我们可以尝试切换成从其他的镜像源下载npm包。
切换镜像源,有下面这几种方式:
- 方式1临时切换镜像源。
- 方式2通过 NRM 切换镜像源(最为推荐的方式)。
- 方式3cnpm。
下面来分别讲一下。
### 方式1临时切换镜像源
安装指定包的时候,通过追加 `--registry`参数即可。格式如下:
```bash
# 格式
npm install [package] --registry [https://xxx]
# 举例:在下载安装 express 这个包的时候,临时指定镜像源为 https://registry.npm.taobao.org
npm install express --registry https://registry.npm.taobao.org
```
## NRM的安装(Win 和 Mac 通用)
### 方式2通过 NRM 切换镜像源(推荐)
由于 NPM 的资源都在国外有时候会被墙导致无法下载或者很慢。此时可以用到NRM。
**NRM**Node Registry Manager。作用是**切换和管理包的镜像源**。
**NRM**Node Registry Manager。作用是**切换和管理npm包的镜像源**。
- 项目地址:<https://www.npmjs.com/package/nrm>
- GitHub地址 <https://github.com/Pana/nrm>
安装 NRM
**安装 NRM**
```bash
npm install -g nrm
@ -510,7 +616,7 @@ nrm ls
nrm use taobao
```
效果下:
效果下:
![](http://img.smyhvae.com/20180302_1215.png)
@ -518,39 +624,38 @@ nrm use taobao
推荐的国内加速镜像淘宝:<https://npm.taobao.org/>
## 安装cnpm
## 方式3安装cnpm
- 项目地址:<https://npm.taobao.org/>
安装`cnpm`替换npmnpm由于源服务器在国外下载node包速度较慢cnpm使用国内镜像
安装`cnpm`替换npmnpm 由于源服务器在国外,下载包速度较慢cnpm使用国内镜像):
```bash
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
![](http://img.smyhvae.com/20180302_2204.png)
如果我们需要通过 cnpm 去安装一个包时,举例如下:
```bash
cnpm i vue
cnpm install vue
```
解释: i 指的就是 install
这里的单词 `install` 可以简写成 `i`
## Node.js 的简单使用
## Node 的使用
我们可以输入`node`命令,然后在里面写 js 的代码。
我们可以输入`node`命令,然后在里面写 js 的代码,也可以 通过 node 运行 js 文件。比如,编写好一个 js文件`01.js`,然后在命令行输入:
或者,也可以 通过 node 运行 指定的 js 文件。比如,编写好一个 js文件`01.js`,然后在命令行输入:
```bash
node 01.js
```
就可以执行 js 程序。
就可以执行这个 js 程序,直接在命令行查看运行结果。
## 我的公众号

View File

@ -4,7 +4,6 @@
网站越来越复杂js代码、js文件也越来越多会遇到**一些问题**
- 文件依赖
- 全局污染、命名冲突
@ -27,7 +26,6 @@
## 模块化的理解
### 什么是模块化
@ -37,7 +35,6 @@
最早的时候我们会把所有的代码都写在一个js文件里那么耦合性会很高关联性强不利于维护而且会造成全局污染很容易命名冲突。
### 模块化的好处
- 避免命名冲突,减少命名空间污染
@ -87,7 +84,6 @@
那如何把这种模块化思维应用到前端来呢?这就产生了两种伟大的 jsRequireJS 和 SeaJS。
### 模块化规范
服务器端规范:
@ -126,12 +122,10 @@ PS面试时经常会问AMD 和 CMD 的区别。
另外还有ES6规范。
这篇文章,我们来讲一下`CommonJS`。
这篇文章,我们来讲一下`CommonJS`,它是 Node.js 使用的模块化规范。
## CommonJS 的基本语法
### CommonJS 的介绍
@ -182,9 +176,11 @@ require(xxx)
解释:
- 下载的第三方模块xxx直接为模块名包名
- 内置模块xxx 为模块名(包名)
- 自定义模块xxx为模块文件路径
- 下载的第三方模块xxx为模块名包名
- 自定义模块xxx为模块文件路径。
## CommonJS 在服务器端的实现举例
@ -536,70 +532,6 @@ module3.foo2();
## others
### SeaJS 的介绍
SeaJS一个基于CMD规范实现的模块化开发解决方案。
作者Alibaba 玉伯。
官网:<http://seajs.org/>
GitHub<https://github.com/seajs/seajs>
现在官网变成了:<https://seajs.github.io/seajs/docs/>
特性:
- 简单友好的模块定义规范。
- 自然直观的代码组织方式。
![](http://img.smyhvae.com/20180303_2107.png)
### RequireJSAMD、SeaJSCDM、CommonJS、ES6 的对比
1、RequireJS 和 AMD
![](http://img.smyhvae.com/20180303_1653.png)
异步模块定义,特点是依赖前置。
2、SeaJS 和 CMD
同步模块定义。
```javascript
// 所有模块都通过 define 来定义
define(funtion(require, exports, module) {
//通过 require 引入依赖
var $ require(`jquery`);
var Spinning = require(`./spinning`);
})
```
3、CommonJS
![](http://img.smyhvae.com/20180303_1701.png)
以上三个都是 ES5里面的规范。
4、ES6
ES6的特性export/import
![](http://img.smyhvae.com/20180303_1704.png)

View File

@ -253,3 +253,70 @@ define(function (require) {
打印结果:
![](http://img.smyhvae.com/20180412_1955.png)
## others
### SeaJS 的介绍
SeaJS一个基于CMD规范实现的模块化开发解决方案。
作者Alibaba 玉伯。
官网:<http://seajs.org/>
GitHub<https://github.com/seajs/seajs>
现在官网变成了:<https://seajs.github.io/seajs/docs/>
特性:
- 简单友好的模块定义规范。
- 自然直观的代码组织方式。
![](http://img.smyhvae.com/20180303_2107.png)
### RequireJSAMD、SeaJSCDM、CommonJS、ES6 的对比
1、RequireJS 和 AMD
![](http://img.smyhvae.com/20180303_1653.png)
异步模块定义,特点是依赖前置。
2、SeaJS 和 CMD
同步模块定义。
```javascript
// 所有模块都通过 define 来定义
define(funtion(require, exports, module) {
//通过 require 引入依赖
var $ require(`jquery`);
var Spinning = require(`./spinning`);
})
```
3、CommonJS
![](http://img.smyhvae.com/20180303_1701.png)
以上三个都是 ES5里面的规范。
4、ES6
ES6的特性export/import
![](http://img.smyhvae.com/20180303_1704.png)

View File

@ -1,10 +1,36 @@
## 模块化开发的引入
### JS开发的弊端
JS 在使用时存在两大问题,而 Node.js 可以很好地避免这两个问题:
- 文件依赖。比如 a 文件依赖 b 文件b 文件依赖 c 文件。而 Node.js 中的文件依赖,不需要人工维护和人为分析。
- 命名冲突。js 的各个文件是相互开放的,容易导致命名冲突。而 Node.js 是属于半封闭的状态,可以指定哪些内容是开放的,哪些内容是封闭的。
Node.js 在解决这两个问题时,用到的就是模块化开发。
### 软件开发中的模块化开发
一个功能就是一个模块,多个模块可以组成完整的应用,抽离一个模块不会影响其他功能的运行。
效果如下:
![](http://img.smyhvae.com/20200409_1934.png)
### Node.js 中的模块化开发
Node.js 规定,一个 JS 文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法访问。
模块内部可以使用 `exports` 对象进行成员导出, 使用 `require` 方法导入其他模块。效果如下:
![](http://img.smyhvae.com/20200409_1932.png)
## ES6模块化的基本语法
### ES6模块化的说明
**依赖模块需要编译打包处理**。原因如下:
- 1有些浏览器不支持 ES6 的语法,写完 ES6 的代码后,需要通过`Babel`将 ES6 转化为 ES5。

View File

@ -50,13 +50,6 @@
中国区的高分项目,都在这里了。
- GitHub 中国区排名:<https://githuber.cn/search?language=JavaScript>
这个网站虽然比较小众,但排名还是相对比较准的。
- GitHub 中国区排名:<http://githubrank.com/>
这个排名很久没更新了,早就不准了;而且还经常打不开。
- GitHub 全球排名:<https://gitstar-ranking.com/>
@ -68,6 +61,15 @@
2019-12备注现在的 GitHub trending 已经不是严格按照新增的 star 数来排行了。所以说,这个排名,也不是那么权威了。
- GitHub 中国区排名:<https://githuber.cn/search?language=JavaScript>
这个网站虽然比较小众,但排名还是相对比较准的。
- GitHub 中国区排名:<http://githubrank.com/>
这个排名很久没更新了,早就不准了;而且还经常打不开。
## 资讯
- 36氪<https://36kr.com/>

View File

@ -28,6 +28,11 @@
- 极客时间 App 的《数据结构与算法之美》
## Vue 教程
- 你也许不知道的 Vuejs<https://github.com/yugasun/You-May-Not-Know-Vuejs>
## 前端教程类
## 其他

View File

@ -1,8 +1,15 @@
### 2020-04-09
- [使用 ImgBot 自动为 Github 项目优化图片](https://www.cnblogs.com/lfri/p/12257277.html)
### 2020-03-31
- [基于Vue2.0 + elementUI 后台管理平台](https://www.jianshu.com/p/deeddeabdef8)
这个elementUI的demo比较完整。项目地址在 [GitHub](https://github.com/xiahuahua/vue-admin-demo)上。