Babel是什么

Babel是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯幫你達到：

1. 使用下一代的javascript（ES6，ES7,……）代碼，即使當前瀏覽器沒有完成支持；
2. 使用基于JavvScript進行擴展語言，比如React的JSX；

npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D

關于babel的使用

首先 babel-preset-es2015 已經廢棄，你可以使用 babel-preset-env 來代替它，后者比前者更好的更方便，這里不在贅述。

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

1. 首先 babel-polyfill 是對所有的API進行全局設置。并且會污染全局變量。
2. babel-runtime 需要對你需要的API，如：Object.assign()。會先require()
3. babel-plugin-transform-runtime 最推薦。它不需要require()也不會全局污染，并且，更厲害的是它是按需打包，全自動。

開始

/**** webpack.config.js ****/// 在規則中增加{  test: //.js$/,  use: 'babel-loader',  // 只處理src目錄下面的。  // 你也可以配置一條規則處理node_modules下面的。  // 我記得swiper不知道哪一版本的直接把原來為編譯的es6的語法塞給我，導致瀏覽器不兼容。  include:[resolve('../src')]}/**** .babelrc ****/// presets字段設定轉碼規則{ "presets": [  ["env", {   "modules": false,   // 需要支持的環境，可選入： chrome, edge, 也可以node:6.5 ，node:current......   "targets": {    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]   }  }],  "stage-2" ], // babel-transform-plugin轉碼預設不起作用的內容如：Object.assign()等等 "plugins": ["transform-runtime"]}

presets能夠解決哪些語法。 package

babel-plugin-transform-runtime能夠解決哪些語法。 package

其他。 更多 

最后：babel看上去好像要配置很多，其實經過官方的一頓簡化之后需要的并沒有那么繁瑣。

github

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。