Node.js 基礎

1.1 為什么學習Node.js ？

• 最簡單最直接的一點，崗位需要這種技能
• 能夠和后端程序員更加緊密的配合
• 網站業務邏輯前置，學習前端技術需要后端技術支撐
• 擴寬知識視野，能夠站在更高的角度審視整個項目

1.2 服務器端需要做的事

• 實現網站的業務邏輯
• 實現數據的增刪改查

1.3 Node的好處

• 使用JavaScript語法開發后端應用

• 一些公司要求前端工程師掌握Node開發

• 生態系統活躍，有大量開源庫可以使用

• 前端開發工具大多基于Node開發

1.4 Node是什么？

Node是一個基于Chrome V8引擎的JavaScript代碼運行環境。

2. Node下載安裝

1. 官網下載：鏈接

2. 將Node安裝目錄添加到環境變量中

3. Node基礎

在Node環境下執行代碼，使用Node命令執行后綴為.js的文件即可

3.1 Node.js全局對象global

在瀏覽器中全局對象是window，在Node中全局對象是global。與js的全局對象名字作用一致

• console.log() 在控制臺中輸出
• setTimeout() 設置超時定時器
• clearTimeout() 清除超時時定時器
• setInterval() 設置間歇定時器
• clearInterval() 清除間歇定時器

4. Node.js 的模塊化開發

4.1 JavaScript 開發弊端

JavaScript在使用時存在兩大問題，文件依賴和命名沖突。

4.2 軟件中的模塊化開發

一個功能就是一個模塊，多個模塊可以組成完整應用，抽離一個模塊不會影響其他功能的運行。

4.3 Node.js的模塊化開發

• Node.js規定，一個js文件就是一個模塊，模塊內部的函數、變量默認情況下在外部是無法得到的，被隔離的。
• 模塊內部可以使用exports對象導出成員，使用require 導入其他模塊。

模塊成員導出：

 // a.js
  // 在模塊內部定義變量
 let version = 1.0;
 // 在模塊內部定義方法
 const sayHi = name => `您好, ${name}`;
 // 向模塊外部導出數據 
 exports.version = version;
 exports.sayHi = sayHi;

模塊成員導入：

  // b.js
  // 在b.js模塊中導入模塊a
 let a = require('./b.js');
  // 輸出b模塊中的version變量
 console.log(a.version);
  // 調用b模塊中的sayHi方法 并輸出其返回值
 console.log(a.sayHi('大兄弟')); 

其中，導入模塊時，后綴名可以省略 （省略.js）

4.4模塊成員的另一種導出方式

module.exports.version = version;
module.exports.sayHi = sayHi;

exports是module.exports的別名(地址引用關系)，導出對象最終以module.exports為準,module.exports才是老大哥了。

5. 系統模塊

Node運行環境提供的API. 因為這些API都是以模塊化的方式進行開發的, 所以稱Node運行環境提供的API為系統模塊

5.1 系統模塊fs 文件操作

讀取內容

//導入系統模塊
const fs = require('fs')
//讀取文件
fs.readFile('文件路徑/名稱'編碼類型'],callback)

寫入內容

//需要寫入的內容
const content = '我是內容，要寫入'
fs.writeFile('文件路徑',content,error=>{
	if(err!=null)	
	{
		console.log(err);
	}
	console.log('寫入成功');
})

5.2 路徑操作path

路徑拼接：從url解析出來的路徑不一定是服務器中實際上的物理路徑，這里往往需要進行路徑拼接才能得到實際地址，獲取正確的內容。

const path = require('path');
//獲取當前文件所在的物理路徑
console.log(__dirname);
let realPath = path.join(__dirname,'fsRead.js')

在讀取文件或者設置文件路徑時都會選擇絕對路徑，因為相對路徑有時候相對的是命令行工具的當前工作目錄

6. 第三方模塊

別人寫好的、具有特定f功能的、我們能直接使用的模塊即第三方模塊，又名包。

第三方模塊的兩種存在方式：

• 以js文件的形式存在，提供實現項目具體功能的API接口。
• 以命令行工具形式存在，輔助項目開發

npmjs.com：第三方模塊的存儲和分發倉庫

6.1 獲取第三方模塊

npm (node package manager)： node的第三方模塊管理工具

安裝：npm install 模塊名

卸載：npm uninstall 模塊名

全局安裝和本地安裝：

• 命令行工具：全局安裝 后面加 -g
• 庫文件：本地安裝

6.2 Gulp模塊

它是基于node平臺開發的前端構建工具

它可以：

• 項目上線，HTML、CSS、JS文件壓縮合并
• 語法轉換（es6、less …）
• 公共文件抽離
• 修改文件瀏覽器自動刷新

gulp的使用

• 使用npm install gulp下載gulp庫文件
• 在項目根目錄下建立gulpfile.js文件
• 重構項目的文件夾結構 src目錄放置源代碼文件，dist目錄放置構建后的文件
• 在gulpfile.js文件中編寫任務
• 在命令行工具中執行gulp任務

gulp插件：

gulp-htmlmin ：html文件壓縮
gulp-csso ：壓縮css
gulp-babel ：JavaScript語法轉化
gulp-less: less語法轉化
gulp-uglify ：壓縮混淆JavaScript
gulp-file-include 公共文件包含
browsersync 瀏覽器實時同步

使用：

//引入gulp模塊
const gulp = require('gulp');
//引入htmlmin模塊
const htmlmin = require('gulp-htmlmin');
//引入fileinclude模塊,用于抽離公共部分的代碼
const fileinclude = require('gulp-file-include');
//引入less文件轉換成css文件的模塊gulp-less
const less = require('gulp-less');
//引入壓縮css文件的模塊gulp-csso
const csso = require('gulp-csso');
//引入轉換js文件的模塊gulp-babel
const babel = require('gulp-babel');
//引入壓縮js文件的模塊gulp-uglify
const uglify = require('gulp-uglify');
//gulp使用方法

//gulp.task 新建任務
//任務名   函數
gulp.task('first',done=>{
    console.log("hello,gulp");
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('./dist/css'));
    done();//告訴gulp已經完成了
});

//html任務 1.將html代碼壓縮，2、將html中的公共代碼抽離
gulp.task('htmlmin',done=>{
    gulp.src('./src/*.html')
        .pipe(fileinclude()) //文件導入include
        .pipe(htmlmin({ collapseWhitespace: true }))//壓縮代碼
        .pipe(gulp.dest('./dist/'));
        done();
});

//css任務： 1、將less文件轉換成css文件 2、將css文件壓縮
gulp.task('cssmin',done=>{
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        .pipe(less())//less轉換成css          
        .pipe(csso())//css壓縮
        .pipe(gulp.dest('./dist/css/'))      
        done();
});

//js任務： 1、es6代碼裝換 2、代碼壓縮
gulp.task('jsmin',done=>{
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env'] //根據當前環境支持的類型進行轉換
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
        done();
});

//復制任務
gulp.task('copy',done=>{
    gulp.src('./src/images/*')//復制images
        .pipe(gulp.dest('./dist/images/'))

    gulp.src('./src/lib/*')//復制lib
        .pipe(gulp.dest('./dist/lib'))
        done();
})

//將任務連起來，一個命令即可執行
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));

7. package.json文件

node_modules文件夾問題

文件夾以及文件過多過碎，當我們將項目整體拷貝給別人的時候,，傳輸速度會很慢很慢.

當別人下載模塊時版本不一致也可能導致運行失敗。

package.json 存儲了包的名稱，package-lock.json 存儲了包的關系，包括版本號，二者方便了人們，可以直接在package.json目錄下使用命令npm install 就可以下載項目所需要的包了。

作用：

項目描述文件，記錄了當前項目信息，例如項目名稱、版本、作者、github地址、當前項目依賴了哪些第三方模塊等。
使用npm init -y命令生成。

項目依賴

在項目的開發階段和線上運營階段，都需要依賴的第三方包，稱為項目依賴
使用npm install 包名命令下載的文件會默認被添加到 package.json 文件的 dependencies 字段中

  "dependencies": {
    "mime": "^2.4.5"
  }

開發依賴

在項目的開發階段需要依賴，線上運營階段不需要依賴的第三方包，稱為開發依賴
使用npm install 包名 --save-dev命令將包添加到package.json文件的devDependencies字段中

"devDependencies": {
    "gulp": "^4.0.2"
  }

8. package-lock.json

作用：

m install 包名`命令下載的文件會默認被添加到 package.json 文件的 dependencies 字段中

  "dependencies": {
    "mime": "^2.4.5"
  }

開發依賴

在項目的開發階段需要依賴，線上運營階段不需要依賴的第三方包，稱為開發依賴
使用npm install 包名 --save-dev命令將包添加到package.json文件的devDependencies字段中

"devDependencies": {
    "gulp": "^4.0.2"
  }

8. package-lock.json

作用：

鎖定包的版本，確保再次下載時不會因為包版本不同而產生問題,可以加快下載速度