Babel是什么？是個編譯器，把高版本js代碼變成低版本js代碼
編譯程序，把原代碼通過詞法分析變成一個個token，舉例：a+b則拆成了a,+,b三個token
語法分析器把這些token根據對應的語法生成抽象語法🌲
語意分析器根據目標語法生成新的AST
最后生成目標代碼，遍歷新的AST，生成目標代碼
Babel的作業步驟
為什么要用Babel?
js編譯器，
- 作用1： 把高版本js代碼編譯成js低版本代碼
- 作用2： polyfill，轉譯新的API,例如Set, Map, promise等
- 作用3：原始碼修改
Babel怎么用？
// babel.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const plugins = []
if (IS_PROD) {
plugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins
}
// presets在plugin之后執行，plugin從前往后執行，presets內的順序是從后往前presets：babel的插件集合
preset.env: 根據我們配置的環境，babel自動決定用哪些插件
UseBuiltIns在Vue專案配置中默認使用usage
vue專案的package.json中的
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ]這塊代碼，會被 @babel/preset-env用來決定使用哪些插件，對應上文中的target
常見面試題：
1. Babel的原理
2. 實作一個Babel插件
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/279968.html
標籤：其他