17 webpack中babel的配置

2022-02-10 13:39:07 字數 1055 閱讀 3056

在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.12.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***相關的語法

webpack中的babel配置

webpage只能處理一部分es6的新語法,更高階的語法不能處理,需要借助第三方loader將高階語法轉換為低階語法 大部分時候用不上,但是如果需要在比較低階的瀏覽器執行時,就需要使用 1.安裝babel相關的包 第一套包 cnpm install babel core babel loader 7...

webpack關聯babel手記

babel是為了把高階js語法轉為低版本語法,它跟webpack是兩個互不相關的工具,要想將它們關聯起來,需要借助到 1 babel core babel的核心模組 2 babel loader 把 babel 和 webpack 進行關聯的橋梁 3 babel preset env 預設 安裝完之...

webpack配合babel使用

babel 是乙個 j ascript 編譯器,可以把es6的語法轉為相容瀏覽器的es5語法 babel中文官網 babel可以單獨使用,但是一般都是和webpack結合一起使用 1 babel loader babel core babel preset env 換語法 安裝依賴 已經在專案裡安裝...