修改 index.js 內容,寫一些 ES6
的語法:
const arr = [ new Promise(() => {}), new Promise(() => {})];arr.map(item => { console.log(item);})
ES6
很強大,但目前并不是所有的瀏覽器都支持,所以需要用到 Babel
,讓舊的瀏覽器或環境中將 ES6
代碼轉換為向后兼容版本的 JavaScript
代碼。
來試一下吧,先安裝需要用的 Babel
包:
npm install babel-loader @babel/core -D
配置 webpack.config.js,增加一條 rulues :
module: { rules: [{ test: //.js$/, exclude: /node_modules/, // 排除該目錄下的所有代碼 loader: "babel-loader" }] }
babel-loader
告訴了 webpack
怎么處理 ES6
代碼,但它并不會將ES6
代碼翻譯成向后兼容版本的代碼,如果想要執行這一步,還需要安裝一個模塊 preset-env,它包含了所有 ES6
代碼轉換的規則:
npm install @babel/preset-env -D
安裝完之后配置一下:
rules: [{ test: //.js$/, exclude: /node_modules/, // 排除該目錄下的所有代碼 loader: 'babel-loader', options:{ 'presets': ['@babel/preset-env'] }}]
這樣,運行打包命令,就可以把 ES6
語法翻譯成 ES5
了,看一下打包的結果:
沒問題,語法已經翻譯成了當前所有瀏覽器能識別的語法,但是做到了這一點還是不夠,因為那些比較新的對象和函數,比如這里的 Promise
和 map
,在低版本的瀏覽器里實際還是不存在的。所以這時不僅要進行語法的轉換,還要想辦法把這些新的特性,補充到低版本的瀏覽器里。怎么做呢? babel
提供了一個工具叫 polyfill
,安裝:
npm install @babel/polyfill -D
然后在 index.js 的最頂部,引入這個包:
import '@babel/polyfill'
保存代碼,再次進行打包查看結果,可以發現打包后的 main.js 里面,有了很多代碼來幫助實現比如 Promise
和 map
這些新特性。看一下 main.js 文件的大小:
859KB,再看一下沒有使用 polyfill
之前的 main.js 大小:
只有4.36KB,使用 polyfill
之后文件變大了很多,這說明了 polyfill
使用了非常多的代碼來填入新特性。
但是,index.js 里只使用了 Promise
和 map
,其它的新特性都沒用,能不能把那些沒用到的實現方法都剔除了呢? 可以,給 preset-env 增加一個 useBuiltIns 配置:
rules: [{ test: //.js$/, exclude: /node_modules/, // 排除該目錄下的所有代碼 loader: 'babel-loader', options: { 'presets': [ ['@babel/preset-env', { useBuiltIns: 'usage' }] ] }}]
useBuiltIns: 'usage'
的意思就是說,當使用 polyfill
往低版本瀏覽器填入一些不存在的特性時,不是全部都填入,而是根據業務代碼使用到的特性去選擇填入,比如這里使用了 Promise
和 map
,那就只填入這兩個,其它的都不用。 再次打包查看結果:
可以看到,main.js 的大小只有 138KB了。
這里還可以配置一些其它的參數,比如 targets 參數:
rules: [{ test: //.js$/, exclude: /node_modules/, // 排除該目錄下的所有代碼 loader: 'babel-loader', options: { 'presets': [ ['@babel/preset-env', { useBuiltIns: 'usage', targets:{ edge: '17', // edge高于17的版本 firefox: '60', // firefox 高于60的版本 chrome: '67' // chrome高于67的版本 } }] ] }}]
targets 是指打包會運行在什么樣的瀏覽器,這有三個瀏覽器,并注明了最低版本。在打包的過程中,babel
會去看這些瀏覽器對 ES6
代碼的支持情況,是否有必要進行語法轉換、填入一些新特性。 運行打包命令查看結果:
發現還是輸出的 Promise
和 map
,并沒有進行新特性的填入,說明這三個版本的瀏覽器對 ES6
的支持已經很好了,不需要在進行額外的處理,main.js 的大小是變成了最初的4.36KB。
到此為止,webpack
對 ES6
的簡單處理就完成了。
關于 babel
還有很多東西和配置項,更多的知識要到 https://babel.docschina.org 來學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答