>[success] # 出現的背景
~~~
1.JavaScript每年都有新功能出現,但是使用JS的瀏覽器卻并不是及時同步更新的。同時,
用戶也不會經常更新瀏覽器版本。所以,如果我們需要使用一些JS新功能時,就必須將
新功能的JS代碼轉換為大部分現代瀏覽器能運行的JS版本。相對的每年js更新可以分為兩個版本
'語法層面'和'api層面',要將ES6+的JS代碼轉換為ES5代碼。因此語言特性的降級成為剛需。
~~~
>[success] # '語法' + 'api'
~~~
1.js 構成部分可以簡單理解成'語法' + 'api',在隨著es每年更新也增加了很多對應新的'語法' 和 'api'
1.1.語法類型常見的'const', 'let'這類
1.2.'api' 例如'Set'、'Map' 等
2.對應的為了可以在一些不支持的環境去使用這類'語法' 和'api' js的社區大神們也給出一些方案
2.1.'語法'可以通過一些js 編譯器,將js語法解析'AST語法樹'并且,當我們拿到'ast語法樹'的時候
可以對相應的節點做替換,做到語法轉換, 如果你看過本冊的 'eslint' 章節你將知道常見對js 轉換ast
語法幾個編譯器解析器:
'esprima'、'espree'、'babel-eslint'、'@babel/eslint-parser'、'@typescript-eslint/parser'
以'babel' 為例注意他只是一個js編譯器用來轉換'ast 語法樹的' 當編寫代碼 'const a = 1' 可能某些運行的
瀏覽器環境對其'const' 語法不支持,將其通過編譯器轉成'ast語法樹' 這里還是以'babel' 為例如圖,注意
'babel'作為解釋器目前僅僅是幫我們對其代碼解析語法樹的
2.2.'api' 和'語法'不同,'api' 是一套完整的方法將某些東西經行處理,例如數組的'concat'他明確是一個處理數組
的方法,和眾多第三方解決方式理解思路相同,我們需要引入具備這些功能的api 包,這種包含js 新api 包叫做
'polyfill(墊片/補丁)',常見的這類庫例如'es5-shim 、es6-shim、 core-js '
~~~
* 語法樹[生成地址鏈接](https://astexplorer.net/)

>[info] ## core.js && babel
~~~
1.因此'core.js' 和 'babel' 是兩件東西
1.1.Babel 官方的介紹'Babel is a JavaScript compiler'也就是說'Babel 其實就是一個 JavaScript 的編譯器'
1.2.'core.js' 它是JavaScript標準庫的 polyfill
2.core-js 又和 Babel 深度綁定,二者其實是兩個東西,但又相互彼此的支持可以應用在一起
~~~
>[info] ## 工具網站
https://esprima.org/demo/parse.html
https://astexplorer.net/
- 工程化 -- 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 -- 案例
- 待續