模組載入及第三方包
1.模組載入及第三方包
1.1.Node.js模組化開發
1 JavaScript開發弊端
JavaScript在使用時存在兩大問題，檔案依賴和命名衝突。
2 生活中的模組化開發
3 軟體中的模組化開發
一個功能就是一個模組，多個模組可以組成完整應用，抽離一個模組不會影響其他功能的執行。
4 Node.js中模組化開發規範
-
Node.js規定一個JavaScript檔案就是一個模組，模組內部定義的變數和函式預設情況下在外部無法得到
-
模組內部可以使用exports物件進行成員匯出， 使用require方法匯入其他模組。
5 模組成員匯出
var add = (n1, n2) => n1 + n2; exports.add = add;
6 模組成員的匯入
var a = require('./03-mobule-a');
console.log(a.add(13,45));
匯入模組時後綴可以省略
7 模組成員匯出的另一種方式
module.exports.version = version; module.exports.sayHi = sayHi;
exports是module.exports的別名(地址引用關係)，匯出物件最終以module.exports為準
8 模組匯出兩種方式的聯絡與區別
var greeting = name => `hello ${name}`;
var x = 100;
exports.x = x;
module.exports.greeting = greeting;
//當exports物件和moudle.exports物件指向的不是同一個物件時以module.exports為準
module.exports = {
uname: '張三丰'
}
exports = {
uname:'李四'
}1.2 系統模組
1 什麼是系統模組
Node執行環境提供的API. 因為這些API都是以模組化的方式進行開發的, 所以我們又稱Node執行環境提供的API為系統模組
2 系統模組fs 檔案操作
f：file 檔案 ，s：system 系統，檔案作業系統。
const fs = require('fs');
讀取檔案內容
fs.reaFile('檔案路徑/檔名稱'[,'檔案編碼'], callback);
寫入檔案內容
fs.writeFile('檔案路徑/檔名稱', '資料', callback);
// 1. 讀取檔案
// 1.通過模組的名字fs對模組進行引用
const fs = require('fs');
// 2.通過模組內部的readFile讀取檔案內容
fs.readFile('./01-hello.js', 'utf-8', (err, doc) => {
// 如果檔案讀取出錯err是一個物件包含錯誤資訊
//如果檔案讀取正確 err是null
//doc是檔案讀取的結果
console.log(err);
console.log(doc);
})
// 2. 寫入檔案
const fs = require('fs');
fs.writeFile('./demo.txt', '這是引入的內容', err => {
if (err != null) {
console.log(err);
return;
}
console.log('檔案寫入成功');
})3 系統模組path 路徑操作
為什麼要進行路徑拼接
-
不同作業系統的路徑分隔符不統一
-
/public/uploads/avatar
-
Windows 上是 \ /
-
Linux 上是 /
4 路徑拼接語法
path.join('路徑', '路徑', ...)
// 匯入path模組
const path = require('path');
// 路徑拼接
var finalpath = path.join('public', 'uploads', 'avatar');
console.log(finialPath);
5 相對路徑VS絕對路徑
-
大多數情況下使用絕對路徑，因為相對路徑有時候相對的是命令列工具的當前工作目錄
-
在讀取檔案或者設定檔案路徑時都會選擇絕對路徑
-
使用__dirname獲取當前檔案所在的絕對路徑
const fs = require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, '01-hello.js'));
fs.readFile(path.join(__dirname, '01-hello.js'), 'utf8', (err, doc) => {
console.log(err);
console.log(doc);
})
1.3.第三方模組
1 什麼是第三方模組
別人寫好的、具有特定功能的、我們能直接使用的模組即第三方模組，由於第三方模組通常都是由多個檔案組成並且被放置在一個資料夾中，所以又名包。
第三方模組有兩種存在形式：
-
以js檔案的形式存在，提供實現專案具體功能的API介面。
-
以命令列工具形式存在，輔助專案開發
2 獲取第三方模組
npmjs.com：第三方模組的儲存和分發倉庫
npm (node package manager) ： node的第三方模組管理工具
下載：npm install 模組名稱
解除安裝：npm uninstall package 模組名稱
全域性安裝與本地安裝
-
命令列工具：全域性安裝
-
庫檔案：本地安裝
3 第三方模組 nodemon
nodemon是一個命令列工具，用以輔助專案開發。
在Node.js中，每次修改檔案都要在命令列工具中重新執行該檔案，非常繁瑣。
使用步驟
-
使用npm install nodemon –g 下載它
-
在命令列工具中用nodemon命令替代node命令執行檔案
4 第三方模組 nrm
nrm ( npm registry manager )：npm下載地址切換工具
npm預設的下載地址在國外，國內下載速度慢
使用步驟
-
使用npm install nrm –g 下載它
-
查詢可用下載地址列表 nrm ls
-
切換npm下載地址 nrm use 下載地址名稱
5 第三方模組 Gulp
基於node平臺開發的前端構建工具
將機械化操作編寫成任務, 想要執行機械化操作時執行一個命令列命令任務就能自動執行了
用機器代替手工，提高開發效率。
6 Gulp能做什麼
-
專案上線，HTML、CSS、JS檔案壓縮合並
-
語法轉換（es6、less ...）
-
公共檔案抽離
-
修改檔案瀏覽器自動重新整理
7 Gulp使用
-
使用npm install gulp下載gulp庫檔案
-
在專案根目錄下建立gulpfile.js檔案
-
重構專案的資料夾結構 src目錄放置原始碼檔案 dist目錄放置構建後文件
-
在gulpfile.js檔案中編寫任務.
-
在命令列工具中執行gulp任務
8 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'));
});
當代碼執行出現以下情況時需進行修改
修改方法：
// 建立一個gulp的任務
gulp.task('first', function (done) {
console.log('gulp first task');
done();
});
最終執行結果：
9 Gulp外掛
gulp-htmlmin ：html檔案壓縮
gulp-csso ：壓縮css
gulp-babel ：JavaScript語法轉化
gulp-less: less語法轉化
gulp-uglify ：壓縮混淆JavaScript
gulp-file-include 公共檔案包含
browsersync 瀏覽器實時同步
1.html任務
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin', () => {
return gulp.src('./src/*.html')
// 2.抽取html檔案中的公共程式碼
.pipe(fileinclude())
// 1.壓縮html檔案中的程式碼
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist));
});
2.css任務
// css任務 //1.less語法轉換 //2.css程式碼壓縮 const less = require('gulp-less'); const csso = require('gulp-csso'); gulp.task('cssmin', () => { //選擇css目錄下的所有less檔案以及css檔案 gulp.src(['./src/css/*.css', './src/css/*.less']) //將less語法轉換為css語法 .pipe(less()) //將css程式碼進行壓縮 .pipe(csso()) // 將處理的結果進行輸出 .pipe(gulp.dest('.dest/css')) })
3. js任務
// js任務 //.1.es6程式碼轉換 // 程式碼壓縮 const babel = require('gulp-babel'); const uglify = require('gulp-uglify'); gulp.task('jsmin', () => { gulp.src('./src/js/*.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(uglify()) .pipe(gulp.dest('dist/js')) })
4.複製資料夾
// 複製資料夾 gulp.task('copy', done => { gulp.src('./src/images/*') .pipe(gulp.dest('dist/images')); gulp.src('./src/lib/*') .pipe(gulp.dest('dist/lib')) done(); })
5. 構建任務
// 構建任務 gulp.task('default', ['htmlmin','cssmin', 'jsmin', 'copy']);
6.如出現以下錯誤：
修改方法如下：
gulp.task('default', gulp.series(['htmlmin','cssmin', 'jsmin', 'copy']));
1.4.package.json檔案
1 node_modules資料夾的問題
-
資料夾以及檔案過多過碎，當我們將專案整體拷貝給別人的時候,，傳輸速度會很慢很慢.
-
複雜的模組依賴關係需要被記錄，確保模組的版本和當前保持一致，否則會導致當前專案執行報錯
2 package.json檔案的作用
專案描述檔案，記錄了當前專案資訊，例如專案名稱、版本、作者、github地址、當前專案依賴了哪些第三方模組等。
使用npm init -y命令生成。
使用 npm install 可以自動生成刪除了的node-modules檔案
3 專案依賴
-
在專案的開發階段和線上運營階段，都需要依賴的第三方包，稱為專案依賴
-
使用npm install 包名命令下載的檔案會預設被新增到 package.json 檔案的 dependencies 欄位中
{ "dependencies": { "jquery": "^3.3.1“ } }
4 開發依賴
-
在專案的開發階段需要依賴，線上運營階段不需要依賴的第三方包，稱為開發依賴
-
使用npm install 包名 --save-dev命令將包新增到package.json檔案的devDependencies欄位中
{ "devDependencies": { "gulp": "^3.9.1“ } }
5 package-lock.json檔案的作用
-
鎖定包的版本，確保再次下載時不會因為包版本不同而產生問題
-
加快下載速度，因為該檔案中已經記錄了專案所依賴第三方包的樹狀結構和包的下載地址，重新安裝時只需下載即可，不需要做額外的工作
1.5.Node.js中模組載入機制
1 模組查詢規則-當模組擁有路徑但沒有後綴時
require('./find.js');
require('./find');
-
require方法根據模組路徑查詢模組，如果是完整路徑，直接引入模組。
-
如果模組字尾省略，先找同名JS檔案再找同名JS資料夾
-
如果找到了同名資料夾，找資料夾中的index.js
-
如果資料夾中沒有index.js就會去當前資料夾中的package.json檔案中查詢main選項中的入口檔案
-
如果找指定的入口檔案不存在或者沒有指定入口檔案就會報錯，模組沒有被找到
2 模組查詢規則-當模組沒有路徑且沒有後綴時
require('find');
-
Node.js會假設它是系統模組
-
Node.js會去node_modules資料夾中
-
首先看是否有該名字的JS檔案
-
再看是否有該名字的資料夾
-
如果是資料夾看裡面是否有index.js
-
如果沒有index.js檢視該資料夾中的package.json中的main選
-
項確定模組入口檔案
-
否則找不到報錯