webpack中使用babel處理es6語法
阿新 • • 發佈：2019-04-26
-c color index lan tle idt pac sta view index.js
const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { console.log(item); })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id=‘root‘></div> </body> </html>
運行npx webpack(用dev-server打包放在了緩存裏面，看不到最終的打包內容)。看到打包生成的main.js的最後幾行，index裏面寫的js，原封不動的打包到了main.js裏面。這個時候瀏覽器中運行，可以打印出promise對象。好像是沒問題的，這是什麽原因呢，這是因為chrome更新比較快，es6裏面很多東西，他都做了實現，所以直接在chrome瀏覽器寫es6語法沒問題，但是比如在ie或者更新沒那麽快的瀏覽器，，，就會報錯。。。
這個時候需要接住babel,https://babeljs.io/。 先安裝兩個包
npm install --save-dev babel-loader @babel/core一個是幫助webpack打包用的工具，一個是babel的核心庫
webpack配置babel相關
module.exports = { module: { rules:[{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }] } }
再繼續安裝
npm install @babel/preset-env --save-dev
為什麽要安裝這個模塊，當我們使用babel－loader處理js文件的時候，實際上這個babel-loader只是webpack和babel做通信的一個橋梁，用了他之後，webpack和babel做了打通，但實際上，babel-loader並不會幫助我們把es6語法翻譯成es5語法，還需要借助一些其它的模塊才能夠幫助我們把es6語法翻譯成es5語法。babel/preset-env就是這樣的一個模塊，這裏面包含了所有把es6轉化成es5的規則。裝好之後，還需要在webpack裏面配置一下
module.exports = { module: { rules:[{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options:{ "presets": ["@babel/preset-env"] } }] } }再使用npx webpack，看轉化後的main.js，發現es6的語法轉化成了es5的語法。但是光做到這點不夠。為什麽呢？因為比如像Promise這樣新的語法變量，包括數組裏面這個map方法，在低版本的瀏覽器裏，實際上還是不存在的。雖然了語法翻譯，但只翻譯了一部分。還有一些對象或者函數在一些低版本的瀏覽器裏面還是沒有的。
所以不僅要用preset-env翻譯es6，還需要將缺失的語法補充到瀏覽器裏，這個模塊就是babel/polyfill。然後把polyfill引入到業務代碼的最頂部 index.js
import "@babel/polyfill"; const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { console.log(item); });處理好後，再運行，會發現原來打包好的main是28kb，現在是534kb。這多出來的內容就是polyfill彌補的內容，所以main.js一下子就變的很大。那麽我不想要這麽大，我只需要你在我需要補充語法的時候出來相應處理的代碼就可以。
安裝
npm install core-js --save-dev
module.exports = {主頁打包出來的main就124kb，小了很多
module: { rules:[{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options:{ presets: [[‘@babel/preset-env‘,{ /** * 當我做polyfill填充的時候，去加一些低版本特性的時候，我不是把所有特性都加進來 * 是根據你的業務代碼來決定要加什麽 */ useBuiltIns: ‘usage‘, corejs: 3 }]] } }] } }
webpack中使用babel處理es6語法