Node的第三方子產品（包）npm
- 一、什麼是第三方子產品
- 二、下載下傳第三方子產品
-
- 1.下載下傳包
- 2.删除包
- 3.包的本地安裝和全局安裝
- 三、常用的第三方子產品
-
- 1.nodemon
- 2.nrm
- 3.gulp
- 4.gulp-cli
- 5.gulp插件
- 6.art-template模闆引擎
- 7.reques子產品
- 四、package.json檔案
-
- 1.生成package.json檔案
- 2.package.json檔案解析
- 3.開發依賴和生産依賴
- 4.npm install解釋
- 5.子產品與子產品之間的依賴關系（package-lock.json檔案）
- 五、包的分類
-
- 1.開發依賴包
- 2.核心依賴包
- 3.全局包
- 六、包的結構
- 七、開發自己的包
-
- 1.初始化包的結構
- 2.初始化package.json
- 3.在index.js檔案上。
- 4.登入npm
- 5.推送到npm上
- 6.删除包
一、什麼是第三方子產品
别人直接寫好的，可以直接使用的，第三方子產品通常有多個檔案組成并且被放置在一個檔案夾中，是以又叫包。
第三方子產品有兩種形式存在：
以js檔案的形式存在，提供實作多項目具體功能的API
以指令行工具的形式存在，輔助項目開發。
二、下載下傳第三方子產品
1.下載下傳包
npm（node package manager）:node的第三方子產品管理工具，可通過指令行直接操作第三方子產品
在指令行中輸入
npm install 包名 @版本号
版本号可以不寫，預設下載下傳最新版本
就可下載下傳指定包，預設下載下傳目前打開指令行工具的位置。會自動建立一個node_modules檔案夾，裡面存放了下載下傳的包。@後面可以根版本号
2.删除包
npm uninstall package 包名
3.包的本地安裝和全局安裝
一般指令行工具包都安裝在全局，全局就是你的電腦，API安裝在本地項目
-g指令就行全局安裝，本地就是本項目中安裝。
三、常用的第三方子產品
1.nodemon
指令行工具，輔助項目開發，在node.js中，每次修改完檔案後，都要重新啟動檔案，使用這個nodemon指令啟動檔案，可以監控檔案的變化，隻要儲存檔案就能直接啟動檔案。不需要再手動啟動。
1.安裝
npm install nodemon -g
-g表示全局安裝，在任何地方都能使用
安裝好後，nodemon指令代替node來啟動檔案即可。
2.nrm
快速切換npm的下載下傳包的位址
原始的npm下載下傳位址在國外，國内下載下傳速度慢，需要切換到國内。
1.安裝
npm install nrm -g
2.檢視所有下載下傳位址
3.選擇下載下傳位址
nrm use 下載下傳位址
#nrm use taobao
3.gulp
1.什麼是gulp
前端建構工具
2.gulp的使用
壓縮html,css,js代碼,合并
浏覽器不是全都支援es6的需要轉換成es5,，less轉css,浏覽器根本不認識less,需要轉換css。
公共檔案抽離
修改檔案時浏覽器自動重新整理。
3.下載下傳
npm install gulp
下載下傳到項目
在項目根目錄下建立gulpfile.js檔案，檔案名不要更改，在這裡編寫壓縮，合并檔案的代碼。
建立src檔案夾，存放源碼，建立dist檔案夾，存放壓縮合并後的源碼。
4.編寫操作代碼任務
gulp.src()//擷取任務要處理的檔案，參數可以寫數組來表示選擇多個檔案。
gulp.dest()//輸出檔案
gulp.task()//建立gulp任務
gulp.watch()//監控檔案的變化
步驟
1.引入gulp子產品
2.建立任務
3.擷取要處理的檔案
4.輸出要處理後的檔案到dist檔案
5.執行任務，而不是執行gulpfile檔案，需要用到gulp-cli指令行工具來執行
const gulp = require('gulp')
gulp.task('任務名'，()=>{
gulp.src('檔案名和路徑')
.pipe(gulp.dest('輸出到指定地方'))
})
//.pipe是用來處理擷取到的檔案代碼，輸出到指定位置，沒有的檔案夾會自動建立，一般是dist下的檔案夾。
//*.html表示擷取所有html檔案
可以建立多個任務，每個任務來處理不同的檔案。
4.gulp-cli
npm install gulp-cli -g
指令行工具
管理gulp
gulp 任務名
來運作任務，他會自動取目前項目根目錄下gulpfile這個檔案，然後在檔案中找任務名，來執行任務。
5.gulp插件
gulp提供的方法很少，壓縮代碼需要不同的插件來執行。
gulp-htmlmin:html檔案壓縮
gulp-csso:壓縮css
gulp-babel:js文法轉換
gulp-less:less文法轉換
gulp-uglify:壓縮混淆js
gulp-file-include:公共檔案包含
browsersync:浏覽器實時同步
使用步驟：
1.下載下傳插件
npm install --save gulp-htmlmin來下載下傳插件
–save已經沒什麼作用了，可以忽略。
2.壓縮代碼
const htmlmin = require('gulp-htmlmin')
gulp.task('htmlmin',()=>{
gulp.src('./src/*.html')
//壓縮html代碼，問要不要壓縮空格，true就是壓縮
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('./dist/demo'))
})
3.調用任務，使用gulp-cli指令
gulp htmlmin
即可成功壓縮，代碼被壓縮成一行
其他子產品同理使用。
3.抽取公共部分代碼
将相同的html代碼放到一個檔案夾中
在需要插入的html檔案寫
@@include('公共代碼存放的檔案')
在gulpfile.js檔案中
在需要合并時寫
.pipe(fileinclude ())
即可抽離并合并公共代碼。
4.less文法轉換和壓縮css代碼
步驟
1.安裝gulp-less和gulp-csso
2.引入less子產品和css壓縮子產品
3.使用子產品，轉換less檔案
const less = require('gulp-less')
const cssmin = require('gulp-csso')
gulp.task('cssmin',()=>{
gulp.src('./src/*.less')
//先把less轉換成css
.pipe(less())
//再把css進行壓縮
.pipe(cssmin())
//輸出到指定檔案夾
.pipe(gulp.dest('./dist/css'))
})
5.js檔案的es6文法轉換
1.安裝gulp-babel
2.使用gulp-babel轉換文法
npm install gulp-babel
const babel = require('gulp-babel')
gulp.task('babel',()=>{
gulp.src('./src/*.js')
.pipe(babel(
{
//它可以判斷目前代碼運作的環境，将代碼轉換成目前運作環境所支援的代碼
presets:['@babel/env']
}
))
.pipe(gulp.dest('./dist/js'))
})
6.一次性執行多個任務
這樣執行default時，可以依次執行後面的任務。
且當任務名為default時可以指令行直接寫gulp
這時gulp3.0版本的寫法
4.0中換了
6.art-template模闆引擎
7.reques子產品
伺服器之間發送請求的子產品
伺服器之間沒有同源政策
npm install request
const request =require('request')
request('位址'，（err,res,body）=>{
//err是錯誤對象
//res是響應資訊
//body是響應内容
})
四、package.json檔案
項目描述檔案，使用的包的目錄都存放在這裡。當npm install 包名時會生成這個檔案，會記錄下載下傳了那些包，當node_modules檔案夾被删除時，直接在項目中輸入npm install會找package.json檔案，根據裡面記錄的包重新下載下傳包。
package.json主要記錄了包的目錄，版本，還有項目的作者，github位址。
1.生成package.json檔案
在項目根目錄下
npm init
然後輸入項目的資訊，名稱，版本等都有預設值，可以直接回車
或者npm init -y可以直接生成，資訊值都是預設值。
2.package.json檔案解析
{
"name": "gulp", //項目的名稱
"version": "1.0.0", //項目的版本
"description": "test",//項目的描述
"main": "gulpfile.js",//項目的主入口檔案，
"dependencies": {
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-csso": "^4.0.1",
"gulp-less": "^4.0.1",
"gulp-htmlmin": "^5.0.1",
"htmlmin": "^0.0.7"
},//項目依賴的包，npm install --production都會會找這裡的包下載下傳。
"devDependencies": {
}, //開發環境依賴的包，
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
'build': 'node index.js'//在指令行中使用npm run build将相當于使用了node index.js檔案。啟動了檔案。字段都需要npm run 别名來執行。
},//長指令行縮寫,指令的别名
"author": "",//項目作者
"keywords":'',//項目的關鍵字
"license": "ISC"//
}
之後新下載下傳的包都會被記錄到這個package.json檔案中。
3.開發依賴和生産依賴
開發依賴的包有時包含指令行工具，而生産依賴的是不需要這些包的。是以要分開來。
開發依賴
下載下傳
npm install 包名 --save-dev
可以将包下載下傳到devDependencies字段中
這樣在不同的運作環境下，可以下載下傳不同的依賴。開發環境直接使用npm install 來下載下傳全部的依賴不管是開發還是生産都會下載下傳。一般指令行工具放在開發依賴裡。
生産依賴
npm install 包
預設會下載下傳到生産依賴中，dependencies字段裡。要在生産環境下隻下載下傳dependencies裡的包，可以使用
npm install --production
來隻下載下傳dependencies字段裡的包。
4.npm install解釋
會先找項目的package.json檔案，無論是開發依賴還是生産依賴都會下載下傳下來。這樣可以把項目給别人時，不用給node_modules,讓别人拿到項目後自己下載下傳。
npm install 包名
這樣的下載下傳指令會預設将包記錄到dependencies字段中。
5.子產品與子產品之間的依賴關系（package-lock.json檔案）
在下載下傳包時，npm會同時産生另外一個檔案，package-lock.json
檔案。它會詳細記錄子產品與子產品之間的詳細的依賴關系。每次下載下傳新包時都會記錄在裡面。
這樣不會因為包的版本關系而出錯。
并且可以加速包的下載下傳速度，它記錄了第三方包的樹狀結構和包的下載下傳位址。
五、包的分類
1.開發依賴包
npm install 包 -D
會下載下傳到devDependencies節點下
2.核心依賴包
在生産環境下用到的包
npm instasll
就會下載下傳到dependencies節點下
3.全局包
npm install 包 -g
會把包下成全局包
會下載下傳到電腦裡，可以給每個項目使用，而上面的兩個包隻能在目前項目使用。
六、包的結構
1.包必須以單獨的目錄存在。即一個檔案夾就是一個包。
2.包的頂級目錄下一定要有package.json檔案
3.package.json必須有name,version,main這三給屬性，分别代表包的名字，版本号，包的入口檔案。
七、開發自己的包
1.初始化包的結構
建立一個檔案夾
新增package.json 包的管理配置檔案
新增index.js 包的入口檔案
新增README.md 包的說明文檔
2.初始化package.json
參考上面
3.在index.js檔案上。
寫你自己的方法，并暴露出去
4.登入npm
npm login
5.推送到npm上
npm publish
6.删除包
npm unpublish 包 --force
隻能删除72小時内的包，之後不能删除了
删除的包不能在24小時内再釋出。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)