Vue中關於Babel的作用和用法解釋

2021-10-07 23:02:14 字數 1111 閱讀 1932

在webpack 中,預設只能處理 一部分 es6 的新語法,一些更高階的es6語法或者 es7 語法,webpack 是處理不了的;

這時候就需要 借助於第三方的 loader,來幫助webpack 處理這些高階的語法,當第三方loader 把 高階語法轉為 低階的

語法之後,會把結果交給 webpack 去打包到 bundle.js 中

通過 babel ,可以幫我們將 高階的語法轉換為 低階的語法

1. 在 webpack 中,可以執行如下兩套 命令,安裝兩套包,去安裝 babel 相關的loader功能:

1.1 第一套包: cnpm i babel-core babel-loader babel-plugin-transform-runtime -d

1.2 第二套包: cnpm i babel-preset-env babel-preset-stage-0 -d

2. 開啟 webpack 的配置檔案,在 module 節點下的 rules 陣列中,新增乙個 新的 匹配規則:

2.1

2.2 注意: 在配置 babel 的 loader規則的時候,必須 把 node_modules 目錄,通過 exclude 選項排除掉:原因有倆:

2.2.1 如果 不排除 node_modules, 則babel 會把 node_modules 中所有的 第三方 js 檔案,都打包編譯,這樣,會

非常消耗cpu,同時,打包速度非常慢;

2.2.2 哪怕,最終,babel 把 所有 node_modules 中的js轉換完畢了,但是,專案也無法正常執行!

3. 在專案的 根目錄中,新建乙個 叫做 .babelrc  的babel 配置檔案,這個配置檔案,屬於json格式,所以,在寫 .babelrc 

配置的時候,必須符合json語法規範: 不能寫注釋,字串必須用雙引號

3.1 在 .babelrc 寫如下的配置:  大家可以把 preset 翻譯成 【語法】 的意思

4. 了解: 目前,我們安裝的 babel-preset-env, 是比較新的es語法, 之前, 我們安裝的是 babel-preset-es2015, 現在,

出了乙個更新的 語法外掛程式,叫做 babel-preset-env ,它包含了 所有的 和 es***相關的語法

babel 元件的作用

babel core 7.0.0 beta.3 把 js 分析成 ast 抽象語法樹,是源 的抽象語法結構的樹狀表現形式 方便各個外掛程式分析語法進行相應的處理。有些新語法在低版本 js 中是不存在的,如箭頭函式,rest 引數,函式預設值等,這種語言層面的不相容只能通過將 轉為 ast,再通過語法...

babel的常見外掛程式的功能和作用

babel es6轉義的核心包 babel cli 用於在終端使用babel,用命令列轉碼 babel core 如果某些 需要呼叫babel的api進行轉碼,就要使用 babel core 模組 babel loader 執行轉義的核心包 babel plugin react transform ...

vue中is的作用和用法

is的作用 總所周知,ul裡面巢狀li的寫法是html語法的固定寫法 還有如table,select等 code1 my component my component ul my component是我們自己寫的元件,但是html在渲染dom的時候,my component對ul來說並不是有效的do...