node基礎與模塊化開發

時間 2020-06-29

標籤 node 基礎模塊化開發简体版

原文原文鏈接

1、Node.js基礎

1. Node開發概述

1.1 爲何要學習服務器端開發基礎

可以和後端程序員更加緊密的配合
網站業務邏輯前置，學習前端技術須要後端技術支撐（Ajax）
擴寬知識視野，可以站在更高的角度審視整個項目

1.2 服務器端開發要作的事情

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

1.3 爲何選擇 Node

使用JavaScript語法開發後端應用
一些公司要求前端工程師掌握Node開發
生態系統活躍，大開源庫可使用
前端開發I大多基於Node開發

1.4 Node是什麼

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

運行環境css

瀏覽器（軟件）可以運行JavaScript代碼，瀏覽器就是JavaScript代碼的運行環境
Node（軟件）可以運行JavaScript代碼，Node就是JavaScript代碼的運行環境

2. Node運行環境搭建

2.1 Node.js運行環境安裝

官網：https://nodejs.org/en/html

LTS = Long Term Support 長期支持版穩定版
Current 擁有最新特性實驗版

2.2 Node環境安裝失敗解決辦法

錯誤代號250二、2503

失敗緣由：系統賬戶權限不足。前端

解決辦法：java

1.以管理員身份運行powershell命令行工具node

2.輸入運行安裝包命令 msiexec /package node 安裝包位置jquery

執行命令報錯

失敗緣由：Node安裝目錄寫入環境變量失敗git

解決辦法：將Node安裝目錄添加到環境變量中程序員

PATH環境變量es6

存儲系統中的目錄，在命令行中執行命令的時候系統會自動去這些目錄中查找命令的位置。

3. Node.js快速入門

3.1 Node.js的組成

JavaScript由三部分組成，ECMAScript, DOM, BOM。
Node.js是由ECMAScript及Node 環境提供的一些附加API組成的，包括文件、網絡、路徑等一些更增強大的 API。

3.2 Node.js基礎語法

全部ECMAScript語法在Node環境中均可以使用。
在Node環境下執行代碼,使用Node命令執行後綴爲,js的文件便可

3.3 Node.js全局對象global

在瀏覽器中全局對象是window,在Node中全局對象是global。

Node中全局對象下有如下方法，能夠在任何地方使用，globa能夠省略。

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

2、模塊加載及第三方包

1. Node.js模塊化開發

1.1 JavaScript開發弊端

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

1.2生活中的模塊化開發

1.3軟件中的模塊化開發

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

1.4 Node.js中模塊化開發規範

Node.js規定一個JavaScript文件就是一個模塊, 模塊內部定義的變量和函數默認狀況下在外部沒法獲得
模塊內部可使用exports對象進行成員導出，使用require方法導入其餘模塊。

1.5 模塊成員導出

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

1.6模塊成員的導入

// b.js
  // 在b.js模塊中導入模塊a
 let a = require('./b.js');
  // 輸出b模塊中的version變量
 console.log(a.version);
  // 調用b模塊中的sayHi方法 並輸出其返回值
 console.log(a.sayHi('黑馬講師'));

說明：導入模塊時後綴能夠省略

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

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

1.8模塊導出兩種方式的聯繫與區別

exports是module.exports的別名(地址引用關係)，導出對象最終以module.exports爲準

2. 系統模塊

2.1什麼是系統模塊

Node運行環境提供的API.由於這些API都是以模塊化的方式進行開發的,因此咱們又稱Node運行環境提供的API爲系統模塊

2.2 系統模塊 fs 文件操做

f: file文件, s: system系統，文件操做系統。

讀取文件內容

fs.readFile('文件路徑/文件名稱'[,'文件編碼'], callback);

寫入文件內容

fs.writeFile('文件路徑/文件名稱', '數據', callback);

const content = '<h3>正在使用fs.writeFile寫入文件內容</h3>';
 fs.writeFile('../index.html', content, err => {
   if (err != null) { 
       console.log(err);
       return;
   }
   console.log('文件寫入成功');
 });

2.3系統模塊path路徑操做

爲何要進行路徑拼接
不一樣操做系統的路徑分隔符不統一
/public/uploads/avatar
Windows上是\ /
Linux 上是/

2.4路徑拼接語法

path.join('路徑', '路徑', ...)

// 導入path模塊
 const path = require('path');
  // 路徑拼接
 let finialPath = path.join('itcast', 'a', 'b', 'c.css');
  // 輸出結果 itcast\a\b\c.css
 console.log(finialPath);

2.5相對路徑VS絕對路徑

大多數狀況下使用絕對路徑,由於相對路徑有時候相對的是命令行工具的當前工做目錄
在讀取文件或者設置文件路徑時都會選擇絕對路徑
使用__dirname獲取當前文件所在的絕對路徑

3. 第三方模塊

3.1什麼是第三方模塊

別人寫好的、具備特定功能的、咱們能直接使用的模塊即第三方模塊，因爲第三方模塊一般都是由多個文件組成而且被放置在一個文件夾中，因此又名包。

第三方模塊有兩種存在形式:

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

3.2獲取第三方模塊

http://www.javashuo.com/tag/npmjs.com:第三方模塊的存儲和分發倉庫

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

下載: npm install 模塊名稱

卸載: npm unintall package模塊名稱

全局安裝與本地安裝

命令行工具:全局安裝(在後加上 –g 表明全局global)
庫文件:本地安裝

3.3 第三方模塊formidable

做用：解析表單，支持get請求參數，post請求參數、文件上傳。

3.4 第三方模塊nodemon

nodemon是一個命令行工具，用以輔助項目開發。

在Node.js中，每次修改文件都要在命令行工具中從新執行該文件，很是繁瑣。

使用步驟

使用 npm install nodemon -g下載它
在命令行工具中用nodemon命令替代node命令執行文件
運行一次，從新編輯保存後會再運行一次

3.5 第三方模塊nrm

nrm ( npm registry manager )：npm下載地址切換工具

npm默認的下載地址在國外，國內下載速度慢

使用步驟

使用npm install nrm -g下載它
查詢可用下載地址列表nrm ls
切換npm下載地址nrm use下載地址名稱

3.6第三方模塊Gulp

基於node平臺開發的前端構建工具

將機械化操做編寫成任務, 想要執行機械化操做時執行一個命令行命令任務就能自動執行了

用機器代替手工，提升開發效率。

Gulp能作什麼

項目.上線，HTML、CSS、 JS文件壓縮合並
語法轉換(es六、 less ..)
公共文件抽離
修改文件瀏覽器自動刷新

Gulp使用

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

Gulp中提供的方法

gulp.src()：獲取任務要處理的文件
gulp.dest()：輸出文件
gulp.task()：創建gulp任務
gulp.watch()：監控文件的變化

例如：

const gulp = require('gulp');
  // 使用gulp.task()方法創建任務
 gulp.task('first', () => {
    // 獲取要處理的文件
    gulp.src('./src/css/base.css') 
    // 將處理後的文件輸出到dist目錄
    .pipe(gulp.dest('./dist/css'));
 });

注意：處理文件必須放在pipe裏面

gulp-cli工具

gulp提供的命令行工具，用於執行項目裏gulp的task任務

安裝：npm install gulp-cli -g
在命令行使用：gulp first
說明：

gulp-cli由於所有項目都用獲得，因此使用全局安裝
first爲本身使用task()方法建立的任務名

Gulp插件

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

安裝方法：npm install 插件名字

抽取html的公共代碼並壓縮代碼

安裝 gulp-htmlmin 與 gulp-file-include 插件

npm install gulp-htmlmin
npm install gulp-file-include

gulpfile.js代碼：

//引入gulp模塊
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

//html任務
//1.壓縮html文件
//2.抽取html的公共代碼
gulp.task('minify', () => {
    gulp.src('./src/*.html')
    //抽取公共代碼
    .pipe(fileinclude())
    //壓縮代碼
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

在src源碼須要引入的html文件添加：

@@include('./common/header.html')

添加上面代碼，fileinclude會指定將指定路徑文件的內容注入進去

命令行執行任務：

gulp minify

轉換less並壓縮css代碼

安裝 gulp-less 與 gulp-csso 插件

npm install gulp-less
npm install gulp-csso

gulpfile.js代碼：

//引入gulp模塊
const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');

//css任務
//1.less語法轉換
//2.壓縮css代碼
gulp.task('cssmin', () => {
    gulp.src(['./src/css/*.less','./src/css/*.css'])
    //less語法轉換
    .pipe(less())
    //壓縮css代碼
    .pipe(csso())
    .pipe(gulp.dest('dist/css'));
});

命令行執行任務：

gulp cssmin

轉換es6語法並壓縮js代碼

安裝 gulp-babel 與 gulp-uglify 插件

gulp-babel 後面兩個是他的依賴

npm install gulp-babel @babel/core @babel/preset-env
npm install gulp-uglify

gulpfile.js代碼：

//引入gulp模塊
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// js任務
// 1.es6代碼轉換
// 2.代碼壓縮
gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
        .pipe(babel({
            // 它能夠判斷當前代碼的運行環境 將代碼轉換爲當前運行環境所支持的代碼
            presets: ['@babel/env']
        }))
        .pipe(uglify())//壓縮代碼
        .pipe(gulp.dest('dist/js'));
});

命令行執行任務：

gulp jsmin

構建任務

上面的代碼只是將基本文件整合，還須要將images等文件夾拷貝到dist

上面的任務是分別編寫的，也須要分別執行，將全部整合所有運行

// 複製文件夾
gulp.task('copy', () => {

	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));

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

// 構建任務
//v3版本的寫法
// gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

//v4版本的寫法
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy'));

說明：

gulp v4版本的gulp.task不支持第二參數爲數組的傳遞，只能使用series或者paralle

gulp.series：按照順序執行

gulp.paralle：能夠並行計算

命令行執行任務：

gulp default

也能夠不寫default，默認是default

4. package.json文件

4.1 node_modules文件夾的問題

文件夾以及文件過多過碎，當咱們將項目總體拷貝給別人的時候,，傳輸速度會很慢很慢.
複雜的模塊依賴關係須要被記錄，確保模塊的版本和當前保持一致，不然會致使當前項目運行報錯

4.2 pakage ison文件的做用

項目描述文件，記錄了當前項目信息，例如項目名稱、版本、做者、github地址、當前項目依賴了哪些第三方模塊等。

使用npm init -y命令生成，加 -y 是默認選項

生成以下：

{
  "name": "gulp-demo",//項目名字
  "version": "1.0.0",//版本
  "description": "",//描述
  "main": "gulpfile.js",//運行主入口文件
  "dependencies": {},//項目依賴
  "devDependencies": {},//開發依賴
  "scripts": {//命令的別名
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],//關鍵字描述當前項目
  "author": "",//做者
  "license": "ISC"//項目遵循的協議，默認ISC：開放源代碼的協議
}

4.3 項目依賴

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

{
    "dependencies": {
        "jquery": "^3.3.1「
    }
 }

4.4 開發依賴

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

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

4.5 package-lock.json文件的做用

鎖定包的版本,確保再次下載時不會由於包版本不一樣而產生問題
加快下載速度,由於該文件中已經記錄了項目所依賴第三方包的樹狀結構和包的下載地址,從新安裝時只需下載便可，不須要作額外的工做

4.6安裝依賴

在項目的根路徑下使用以下命令：

開發環境：npm install
生產環境：npm install --production

生產環境不下載開發依賴(devDependencies)

4.7 使用項目命令別名

當命令過長時可使用自定義別名，格式：npm run 別名

例：npm run test

5. Node.js中模塊的加載機制

5.1 模塊查找規則-當模塊擁有路徑但沒有後綴時

require('./find.js');

require('./find');

require方法根據模塊路徑查找模塊，若是是完整路徑，直接引入模塊。
若是模塊後綴省略，先找同名JS文件再找同名JS文件夾
若是找到了同名文件夾，找文件夾中的index.js
若是文件夾中沒有index.js就會去當前文件夾中的package.json文件中查找main選項中的入口文件
若是找指定的入口文件不存在或者沒有指定入口文件就會報錯，模塊沒有被找到

5.2 模塊查找規則-當模塊沒有路徑且沒有後綴時

require('find');

Node.js會假設它是系統模塊
Node.js會去node_modules文件夾中
首先看是否有該名字的JS文件
再看是否有該名字的文件夾
若是是文件夾看裏面是否有index.js
若是沒有index.js查看該文件夾中的package.json中的main選項肯定模塊入口文件
不然找不到報錯

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。