webpack中的babel配置

webpage只能處理一部分es6的新語法，更高階的語法不能處理，需要借助第三方loader將高階語法轉換為低階語法

大部分時候用不上，但是如果需要在比較低階的瀏覽器執行時，就需要使用

第一套包

cnpm install babel-core [email protected] babel-plugin-transform-runtime -d

cnpm install babel-preset-env babel-preset-stage-0 -d

在module節點下的rules陣列中，新增乙個新的匹配規則

不然webpack會將所有js進行打包

就算將node_modules中的js打包完成，也執行不了

最前面不需要加其他的東西

（sjon格式不能加注釋）

第一套是語法轉換器

第二套是語法對應規則

babel-preset-env包含了所有babel-preset-es****

安裝babel-loader

cnpm install  babel-loader -d

@babel/core

@babel/plugin-proposal-class-properties

@babel/plugin-transform-runtime

@babel/preset-env

@babel/runtime

相比於7.x全部加了個@，都以babel/開頭了

cnpm i '@babel/core'

-d

//安裝完的版本

"@babel/core"
:"^7.8.4"
,"@babel/plugin-proposal-class-properties"
:"^7.8.3"
,"@babel/plugin-transform-runtime"
:"^7.8.3"
,"@babel/preset-env"
:"^7.8.4"
,"@babel/runtime"
:"^7.8.4"
,

關於webpack中babel外掛程式的使用

webpack是不能解析es6語法的，需要用到外掛程式來轉化為es5和瀏覽器能識別的檔案 1.cnpm i babel core babel loader 7 babel plugin transform runtime d這裡我使用的cnpm指令安裝可以更快，盡量不要npm和cnpm指令混用，因為...

17 webpack中babel的配置

在webpack中，預設只能處理一部分es6的新語法，一些更高階的es6語法或者es7語法，webpack是處理不了的 這時候，就需要借助於第三方的loader，來幫助webpack處理這些高階的語法，當第三方loader把高階語法轉為低階的語法之後，會把結果交給webpack去打包到bundle....

webpack關聯babel手記

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