前端工程化簡介

工程就是一個項目（比如一個網(wǎng)站或者app）

一個工程的生命周期

工程化就是項目完成過程中，用到的各種工具和技術(shù)

前端工程化

前端工程化就是通過各種工具和技術(shù)，提高前端開發(fā)效率的過程
- 前端工程化的內(nèi)容：各種工具和技術(shù)
- 前端工程化的作用：通過使用工具，提高開發(fā)效率

前端工程化的內(nèi)容

兼容性查閱

www.caniuse.com

比如查看ES6標(biāo)準(zhǔn)兼容性：

ES6支持瀏覽器

前端工程化解決的問題

項目上線前，壓縮代碼
對ES6+或者CSS3新特性轉(zhuǎn)換
對less等css的預(yù)編譯語言進(jìn)行編譯處理
...

前端工程化包含的內(nèi)容

工程化≠某個工具

node.js

基于chrome的V8引擎的JavaScript運行環(huán)境
不是新語言，也不是JavaScript的新框架

node.js能做什么？

負(fù)責(zé)后端的功能

為網(wǎng)站，app，小程序提供數(shù)據(jù)服務(wù)

開發(fā)前端方向的工具

各種前端工程化的工具
用作桌面應(yīng)用開發(fā)
各種跨平臺的應(yīng)用

node.js APIs

web和Node的交集和區(qū)別

安裝node.js

www.nodejs.org

下載安裝一路next
安裝LTS版node，便于后期維護(hù)更新
檢查是否安裝成功：cmd命令行node -v

使用node.js

運行JavaScript有兩種方式

腳本模式

node path/filename.js(回車)

交互模式
- 使用tab鍵自動補(bǔ)全
- 探索JavaScript對象（例如：Math.然后按兩次tab鍵，就可以看到Math下所有的對象）
- 點命令（例如：輸入.help然后回車）

快捷鍵Ctrl+`可以打開編輯器里面的命令行

全局對象

node.js下的全局對象是global
在交互模式下，聲明的變量和函數(shù)都屬于global
- 例如：var a = 1; global.a可以訪問到
在腳本模式下，聲明的變量和函數(shù)都不屬于global
Node.js 不能訪問瀏覽器端的全局對象 window

全局函數(shù)

JavaScript語言本身提供的全局函數(shù)，node.js依然可用
- parseInt/parseFloat/isNaN/isFinite/eval...
- 一次性定時器（setTimeout/clearTimeout）
- 周期性定時器（setInterval/clearInterval）
Node.js環(huán)境也提供了一些全局函數(shù)
- 立即執(zhí)行定時器（setImmediate/clearImmediate）
  在實踐隊列開始之前，立即執(zhí)行
- 進(jìn)程立即執(zhí)行定時器（process.nextTick）
  在主進(jìn)程結(jié)束后立即執(zhí)行

node.js模塊

內(nèi)置模塊（官方提供的，跟隨node.js一起安裝）

http://nodejs.cn/api/

自定義模塊（工程師自己寫的）
第三方模塊（社區(qū)維護(hù)的，需要單獨下載才能使用）

https://www.npmjs.com/

內(nèi)置模塊，也叫核心模塊

console

console.log("1")
console.log(1)

var obj = {
    name: 'Tom',
    age: 18
}
console.log(obj)
console.table(obj)

// 計時函數(shù)
console.time('for') // 計時開始
for (let i = 0; i < 1000000; i++) {

}
console.timeEnd('for') // 計時結(jié)束

console.time('while')
var i = 0
while (i < 1000000) {
    i++;
}
console.timeEnd('while')

process（進(jìn)程）

作為全局變量，它始終可供 Node.js 應(yīng)用程序使用，無需使用 require()。它也可以使用 require() 顯式地訪問：

const process = require('process');

// process 是全局變量，使用時，無需引入
// const process = require('process')

// console.log(process)

// 輸出 node 版本
console.log(process.version)

// 輸出操作系統(tǒng)架構(gòu)
console.log(process.arch)

// 輸出操作系統(tǒng)平臺
console.log(process.platform)

// 輸出當(dāng)前工作目錄 cwd = current working directory
console.log(process.cwd())

// 環(huán)境變量
console.log(process.env)
// 自定義環(huán)境變量
process.env.NODE_ENV = 'develop'
console.log(process.env)

// 獲取進(jìn)程的編號
console.log(process.pid)

// 殺死進(jìn)程  process.kill(進(jìn)程編號)

path

與process不同，需要引入path模塊，使用require

const path = require('path');

// 引入 path 模塊
const path = require('path')

// 獲取當(dāng)前文件所在的路徑
console.log(process.cwd())

// dir = directory 目錄
console.log(__dirname) // 獲取當(dāng)前文件所在的路徑

// D:\cliu\Desktop\node\03.core_module\path.js
console.log(__filename) // 獲取當(dāng)前文件的完整路徑

// 獲取文件的擴(kuò)展名 ext = extension 
console.log(path.extname(__filename))

// 獲取路徑中的目錄部分
console.log(path.dirname(__filename))

// 獲取路徑中的文件名
console.log(path.basename(__filename))

// 當(dāng)前目前的上一級
const t = path.join(__dirname, '..')
console.log(t)
// 將多個路徑合并起來
const a = path.join('D:/', 'a', 'b', 'c.png')
console.log(a)

fs

fs提供了文件操作的API
- 文件操作
- 目錄操作
使用之前，需要require引入
官方文檔：

http://nodejs.cn/api/fs.html

文件操作：

寫文件

// 文件的寫操作
const fs = require('fs')

// 清空寫入,寫之前會把之前的內(nèi)容清空
// fs.writeFile('文件路徑', '寫入內(nèi)容', 回調(diào)函數(shù))，沒有文件自動創(chuàng)建
fs.writeFile('./1.txt', '曾經(jīng)有一首歌，她感動了我', (err) => {
    if (err) throw err
    console.log('寫入成功')
})

讀文件

const fs = require('fs')
const path = require('path')

// 讀文件
// 指定目標(biāo)文件所在的路徑
// var filename = __dirname + '/1.txt'
var filename = path.join(__dirname, '1.txt')

// 語法：fs.readFile('文件路徑', 回調(diào)函數(shù))
fs.readFile(filename, (err, data) => {
    if (err) throw err
    // data 是二進(jìn)制數(shù)據(jù)，默認(rèn)輸出時，以十六進(jìn)制的方式展示
    console.log(data.toString())
})

刪除文件（unlink）

const fs = require('fs')

// 語法： fs.unlink('文件路徑', 回調(diào)函數(shù))
fs.unlink(__dirname+'/1.txt', (err) => {
    if (err) throw err
    console.log('刪除成功')
})

追加寫入（append）

下列代碼邏輯有誤，后期待糾正

const fs = require('fs')

// 追加寫入
// 語法： fs.appendWrite('文件路徑'，'寫入內(nèi)容', 回調(diào)函數(shù))
// fs.appendFile(__dirname+'/2.txt', '曾經(jīng)有一首歌，她是這樣唱的\n', (err) => {
//     if (err) throw err
//     console.log('追加寫入成功') 
// })

// 有數(shù)組a
var a = ['白石定規(guī)', '魔女之旅', '伊蕾娜']
/**
 * 通過 appendFile 實現(xiàn)如下寫入
 * 數(shù)據(jù)1
 * 數(shù)據(jù)2
 * 數(shù)據(jù)3
 */
for(var i = 0; i < a.length; i++){
    fs.appendFile(__dirname+'/2.txt', a[i]+"\n", (err) => {
        if (err) throw err
        console.log('數(shù)據(jù)'+i+'追加寫入成功') 
    })
    
}

目錄操作

創(chuàng)建新目錄

const fs = require('fs')

// 創(chuàng)建目錄
// 語法：fs.mkdir('目錄路徑', 回調(diào)函數(shù))
fs.mkdir('./d1', (err) => {
    if (err) throw err
    console.log('創(chuàng)建成功')
})

刪除目錄

const fs = require('fs')

// 刪除目錄
// 語法： fs.rmdir('目錄路徑', 回調(diào)函數(shù))
fs.rmdir('./d1', (err) => {
    if (err) throw err
    console.log('刪除成功')
})

// 聲明: rmdir 只能刪除空目錄
// 1. 先刪除目錄下的普通文件（清空目錄）
// 2. 通過 rmdir 刪除空目錄

重命名目錄

const fs = require('fs')

// 重命名目錄
// 語法： fs.rename(舊名稱, 新名稱, 回調(diào)函數(shù))
fs.rename(__dirname+'/d1', __dirname+'/d2', (err) => {
    if (err) throw err
    console.log('重命名成功')
})

讀目錄

const fs = require('fs')

// 讀目錄
// 語法：fs.readdir('目錄路徑', 回調(diào)函數(shù))
fs.readdir(__dirname, (err, data) => {
    if (err) throw err
    // console.log(data)
    data.map((d) => {
        // console.log(d)
        fs.stat(__dirname+"/"+d, (err, stat) => {
            if (err) throw err
            if (stat.isDirectory()) {
                // 判斷當(dāng)前文件是否是目錄
                console.log('目錄：', d)
            } else if (stat.isFile()) {
                // 判斷當(dāng)前文件是否是普通文件
                console.log('文件：', d)
            }
        })
    })
})

fs同步函數(shù)

同步函數(shù)
- 在主程序中自上而下運行
- 例如：火車站排隊買票
異步函數(shù)
- 通過回調(diào)函數(shù)在事件隊列中運行
- 例如：委托人買票，買好通知

const fs = require('fs')

// 先判斷文件是否存在
// 然后，如果文件存在的化，再執(zhí)行刪除
if (fs.existsSync(__dirname+"/1.txt")) {
    fs.unlinkSync(__dirname+"/1.txt")
} else {
    console.log('文件不存在')
}

fs：實現(xiàn)文件的復(fù)制和壓縮

要求：

const fs = require('fs')
const path = require('path')

// 把 src/style.css 復(fù)制到 dist/ 目錄下
const dist = path.join(__dirname, 'dist')

fs.readFile('./src/style.css', (err, data) => {
    if (err) {
        throw err
    } else {
        console.log(data.toString())

        // 確保 dist 目錄存在
        if (!fs.existsSync(dist)) {
            fs.mkdirSync(dist)
        }

        // 對文件進(jìn)行壓縮： 將無用的注釋或空格去掉
        //                                                        /*  注釋的內(nèi)容  */
        var mydata = data.toString().replace(/\s+/g, '').replace(/\/\*{1,2}[\s\S]*\*\//g, '')

        // 將讀到的內(nèi)容，寫入目標(biāo)文件
        fs.writeFile(dist+'/style.min.css', mydata, (err) => {
            if (err) throw err
            console.log('成功')
        })
    }
})

文件流

內(nèi)存效率會提高
- 無需加載大量數(shù)據(jù)
- 流把大數(shù)據(jù)切成小塊，占用內(nèi)存更少
時間效率高
- 接獲數(shù)據(jù)后立即開始處理
- 無需等到內(nèi)存緩沖填滿

const fs = require('fs')

// 1. 創(chuàng)建讀取流
var readStream = fs.createReadStream('./file2.txt')

// 2. 創(chuàng)建寫入流
var writeStream = fs.createWriteStream('./file_stream.txt')

// 3. 把讀取流通過管道傳給寫入流
readStream.pipe(writeStream)

http

http可以發(fā)布web服務(wù)
使用之前通過require引入
官方文檔

http://nodejs.cn/api/http.html

const http = require('http')

// 1. 創(chuàng)建服務(wù)器
/**
 * req = request 請求
 * res = response 響應(yīng)
 */
const server = http.createServer((req, res) => {
    res.statusCode = 200
    res.setHeader('Content-Type', 'text/plain; charset=utf-8')
    res.end('你好：Node.js')
})

// 2. 發(fā)布 web 服務(wù)
const port = 3000
const host = 'localhost'
// 在瀏覽器中訪問 http://localhost:3000 然后能看到效果
server.listen(port, host, () => {
    console.log(`服務(wù)器運行在 http://${host}:${port}`)
})

自定義模塊

Node.js中每一個單獨的js文件，就是一個模塊
每一個模塊中都有一個module變量，代表當(dāng)前模塊
module的exports屬性是對外的接口
- 只有導(dǎo)出的（module.exports）的屬性或方法才能被外部調(diào)用
- 未導(dǎo)出的內(nèi)容是模塊私有，不能被外部訪問
使用時，通過require引入

導(dǎo)出

引入文件模塊

const circle = require('./circle')

模塊的加載邏輯

按照組織方式劃分模塊
目錄模塊的加載邏輯

package.json是目錄模塊的描述文件

如果沒有package.json，默認(rèn)文件就是index.js，都沒有就報錯

第三方模塊

社區(qū)維護(hù)的Node.js模塊
想要使用需要單獨安裝

https://www.npmjs.com/

npm（node.js包管理工具）

測試npm

npm --version

npm可以安裝包和包的依賴

非常方便的npm安裝

為了提高npm上的包的下載速度，使用淘寶鏡像，命令：

使用npm安裝包

npm install <pack-name>

安裝方式

全局安裝

npm install <package-name> --global

npm i <package-name> -g

明確需求
找到合適的包
通過npm安裝包
使用包

局部安裝

創(chuàng)建項目目錄（mkdir project）
進(jìn)入項目目錄（cd project）
初始化項目（npm init）
在項目中安裝包

npm install <package-name> --save

npm i <package-name> -S

初始化項目

npm init

會進(jìn)行一系列npm初始化提問，之后出現(xiàn)json文件將你的內(nèi)容進(jìn)行整理，局部安裝的npm包在.\node_modules.bin\npm包，指令也是在這個地址之下使用

--save 和 --save-dev

-- save對應(yīng)dependencies
-- dev 對應(yīng)devDenpendencies

總結(jié)：

npm安裝包的方式

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端工程化概述，Node.js基礎(chǔ)