>[success] # Node 工程化
前端工程化是基于 Node.js,想對工程化有了解 需要了解 Node.js 部分知識
1. 什么是`Node.js`,是一個基于**V8 JavaScript引擎的JavaScript運行時環境**,**V8**可以嵌入到任何**C ++應用程序**,V8 只是作為執行 js的,**以瀏覽器為例** V8 只是瀏覽器構成一部分(**解析、渲染HTML、CSS等相關渲染引擎,另外還需要提供支持瀏覽器操作的API、瀏覽器自己的事件循環**),`Node.js` 中除了V8 (**文件系統讀/寫、網絡IO、加密、壓縮解壓文件**)
2. `Node.js`,編寫的JavaScript代碼會經過V8引擎,再通過Node.js的Bindings,將任務放到Libuv的事件循環中,libuv(**使用C語言編寫的庫**)提供了**事件循環、文件系統讀寫、網絡IO、線程池**等等內容

>[danger] ##### 安裝
1. Node.js 在安裝時候有兩個版本
1.1. **LTS版本**:(Long-term support, 長期支持)相對穩定一些,推薦線上環境使用該版本;
1.2. **Current版本**:最新的Node版本,包含很多新特性
2. 不同環境安裝`Node.js` 也不同方式,**Mac上的homebrew,Linux上的yum、dnf**等,也可以自己下載安裝包**window選擇.msi安裝包,Mac選擇.pkg安裝包**
>[danger] ##### 多版本管理工具
1. 用來切換電腦上node 版本工具有兩個,**nvm:Node Version Manager**,**n:Interactively Manage Your Node.js Versions**,這兩種都不能在Window 上使用
2. **Window 需要使用nvm**,在GitHub上有提供對應的window版本:https://github.com/coreybutler/nvm-windows , 直接下載安裝即可
>[danger] ##### 使用 nvm
1. **nvm list** 查看當前安裝的Node.js所有版本
2. **nvm install 版本號** 安裝指定版本的Node.js (**nvm install latest** 安裝最新的node版本)
3. **nvm uninstall 版本號** 卸載指定版本的Node.js
4. **nvm use 版本號** 選擇指定版本的Node.js
>[danger] ##### 使用 n
1. 通過 npm 安裝 n 管理參考 https://github.com/tj/n ,`npm install -g n`
2. **n lts** 安裝最新的lts 版本
3. **n latest** 安裝最新版本
4. **n** 查看版本
>[danger] ##### 想更新node 版本
1. 這里接受的是win 更新方式,輸入where node 看一下node 安裝的盤符,在node 官網下載一個新的版本包,然后安裝剛才查看的盤符
2. Linux 只是使用 n 更新即可
>[danger] ##### Node 的 REPL
1. REPL是**Read-Eval-Print Loop的簡稱,翻譯為“讀取-求值-輸出”循環**,**是一個簡單的、交互式的編程環境** ,你可以直接在控制進行代碼演練

>[info] ## Node 中全局對象
1. **global是一個全局對象,類似于瀏覽器中的window**,在新的標準中瀏覽器和 Node 都可以使用**globalThis**,也是全局對象的
2. 和瀏覽器不同點,**node中,我們通過var定義一個變量,它只是在當前模塊中有一個變量,不會放到全局中**,**但是在瀏覽器中執行的JavaScript代碼,如果我們在頂級范圍內通過var定義的一個屬性,默認會被添加到window對象上**
~~~
// 在node 環境下執行
var a = 1
console.log(global.a) // undefined
~~~
3. **__dirname、__filename、exports、module、require()**,這些全局對象實際上是模塊中的變量,**只是每個模塊都有**,看來像是全局變量,在命令行交互中是不可以使用的

>[danger] ##### 在工程化中會用到的
1. **__dirname**:獲取當前文件所在的路徑(不包括后面的文件名)
2. **__filename**:獲取當前文件所在的路徑和文件名稱(包括后面的文件名稱)
3. **process對象**:process提供了Node進程中相關的信息.可以獲取Node的運行環境、參數信息等
3.1. **process.argv** : 接受命令行參數,執行node 使用腳本 `node xx.js`,下**執行node程序的過程中,我們可能希望給node傳遞一些參數** `node xx.js xx1 xx2`,可以使用 **process.argv** ,得到一個數組,前兩項數據分別是:Node.js環境的路徑;當前執行的js文件的全路徑,從第三個參數開始表示命令行參數
~~~
console.log(process.argv)
~~~

>[info] ## 內置模塊path
1. 在不同 系統上路徑系統是不同,**window**上會使用` \`或者 `\\ `來作為文件路徑的分隔符,當然目前也支持 `/`,在**Mac OS、Linux**的Unix操作系統上使用` /` 來作為文件路徑的分隔符,因此在不同系統中路徑符不同,需要操作我們可以使用 **path** 模塊
>[danger] ##### 獲取路徑一些信息api
1. **dirname**:獲取文件的父文件夾;
2. **basename**:獲取文件名;
3. **extname**:獲取文件擴展名;
~~~
console.log(path.extname(filepath)) // .txt
console.log(path.basename(filepath)) // nba.txt
console.log(path.basename(filepath, '.txt')) // nba //只要名稱不要后綴
console.log(path.dirname(filepath)) // C://abc/cba
~~~
>[danger] ##### 路徑拼接 -- join
1. 用于連接路徑**從左到右進行處理**,拼接后生成的是**相對路徑**。該方法的主要用途在于,會正確使用當前系統的路徑分隔符,**Unix系統是"/",Windows系統是"\"**。下面案例 window 打印結果 `\abc\cba\123.txt`,Unix系統是`/abc/cba/123.txt`
~~~
const path1 = '/abc/cba'
const path2 = '123.txt'
console.log(path.join(path1, path2))
~~~
2. join 尾部的斜杠**不會被刪除**,會把全部給定的 path 片段連接到一起,并規范化生成的路徑,下面案例中拼接重疊的路徑最后打印只有一個。但末尾的還存在
~~~
const path1 = '/abc/cba/'
const path2 = '/123'
const path3 = '/456/'
console.log(path.join(path1, path2, path3)) // \abc\cba\123\456\
~~~
3. 長度為零的 path 片段會被忽略
~~~
path.join('/目錄1', '', '目錄3'); // \目錄1\目錄3
~~~
4. 如果連接后的路徑字符串為長度為零的字符串,則返回 ‘.’,表示當前工作目錄
~~~
path.join('', '', ''); // .
~~~
>[danger] ##### 拼接絕對路徑 -- path.resolve()
1. `path.resolve()` 方法路徑的序列是從右往左被處理的會把一個路徑或路徑片段的序列解析為一個**絕對路徑**;如果沒有path傳遞段,path.resolve()將返回當前工作目錄的絕對路徑
~~~
const path = require('path')
console.log(path.resolve('./abc/cba', '../zz/bb', './abc.txt')) // d:\lzz\abc\zz\bb\abc.txt
console.log(path.resolve()) // d:\lzz
~~~
2. 生成的路徑被規范化并刪除尾部斜杠,零長度path段被忽略
~~~
const path = require('path')
console.log(path.resolve('./abc/cba', '../zz/bb', './abc.txt/')) // d:\lzz\abc\zz\bb\abc.txt
~~~
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續