babel-loader 配置


安裝

  • 安裝:npm i -D babel-core babel-loader babel-preset-env

 

babel-core

把 js 代碼分析成 ast (抽象語法樹, 是源代碼的抽象語法結構的樹狀表現形式),方便各個插件分析語法進行相應的處理。有些新語法在低版本 js 中是不存在的,如箭頭函數,rest 參數,函數默認值等,這種語言層面的不兼容只能通過將代碼轉為 ast,再通過語法轉換器分析其語法后轉為低版本 js。

babel-preset-*

babel-plugin-* 代表了一系列的轉碼插件
有了 babel-plugin 系列,可以按需配置自己想要的特性,若是想搭個 es6 環境,一個個地配置各個插件,我猜你會瘋掉。babel-preset 系列就可以滿足我們的需求,babel-preset 系列打包了一組插件,類似於餐廳的套餐。如 babel-preset-es2015 打包了 es6 的特性,babel-preset-stage-0 打包處於 strawman 階段的語法

 

使用

第一步

 

 

/* webpack.config.js */

module: {
rules: [
// exclude 排除,不需要編譯的目錄,提高編譯速度
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}

 

第二步

在項目根目錄中新建.babelrc配置文件

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM