section-2.1 什么是loader

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換荤牍。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件。因此庆冕，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”康吵，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript访递，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL晦嵌。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
webpack默認(rèn)只能打包js結(jié)尾的文件，因此當(dāng)需要打包其他格式文件的時(shí)候惭载，我們都需要安裝對(duì)應(yīng)的loader旱函，并在webpack.config.js里寫好配置規(guī)則，這里以圖片為例
首先先下載file-loader描滔，執(zhí)行npm i file-loader -D棒妨，然后更改配置如下

module.exports = {
    mode: "none",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [  //模塊打包規(guī)則
            {
                test: /\.jpg$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    }
}

在index.js里引入圖片模塊

import Header from './header.js'
import Content from './content.js'
import Sidebar from './sidebar.js'
import avatar from './avatar.jpg'

let root = document.getElementById("root")

let header = new Header(root)
let content = new Content(root)
let sidebar = new Sidebar(root)

let img = new Image()
img.src = avatar
root.append(img)

執(zhí)行npm run bundle，此時(shí)圖片就被打包成功含长。注意券腔，這里的模塊返回的是打包后的圖片路徑，所以可以直接賦值給src茎芋。對(duì)到webpack颅眶，當(dāng)匹配到.jpg結(jié)尾的格式時(shí)蜈出，會(huì)去使用file-loader田弥，file-loader會(huì)先把圖片移動(dòng)到dist目錄下，并賦予一個(gè)唯一的文件名铡原，然后返回圖片路徑

section-2.2 使用loader打包靜態(tài)資源（圖片篇）

options參數(shù)偷厦，用來給打包的loader添加額外的規(guī)則，代碼里寫了注釋這里就不寫太多了

{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'file-loader',
        options: {
            //placeholder 占位符
            name: '[name]_[hash].[ext]',  //打包出來的圖片名稱是原圖片名稱跟后綴
            outputPath: 'images/'  //打包到images文件夾下燕刻，如果沒有會(huì)創(chuàng)建該文件夾
        }
    }
}

這里插點(diǎn)額外知識(shí)只泼，[]里除了占位符，還能使用 “:” 來附加規(guī)則卵洗，如下

{
  loader: 'file-loader',
  options: {
    name: '[sha512:hash:base64:7].[ext]'
  }
}

// 個(gè)人理解：用sha512這個(gè)字符的哈希值轉(zhuǎn)成base64位取前7位请唱，如有誤歡迎大佬指正，這部分知識(shí)不太懂
gdyb21L.png

除了字符过蹂，甚至還能使用函數(shù)十绑，來對(duì)不同環(huán)境制定不同規(guī)則：

{
  loader: 'file-loader',
  options: {
    name (file) {
      if (env === 'development') {
        return '[path][name].[ext]'
      }

      return '[hash].[ext]'
    }
  }
}

跟file-loader相似的還有一個(gè)url-loader崭庸，不同在于url-loader默認(rèn)返回DataURL典蝌，因此需要設(shè)置limit來制定規(guī)則

{
    test: /\.(jpg|png|gif)$/,
    use: {
        // 如果圖片比較小可以使用url-loader
        loader: 'url-loader',
        options: {
            name: '[name]_[hash].[ext]',  //打包出來的圖片名稱是原圖片名稱跟后綴
            outputPath: 'images/',        //打包到images文件夾下，如果沒有會(huì)創(chuàng)建該文件夾
            limit: 2048  //是否小于2KB锅减，當(dāng)大于2KB的時(shí)候不要打包成DataURL
        }
    }
}

好處是會(huì)把圖片返回成base64位文件脆诉，省了HTTP請(qǐng)求甚亭，但當(dāng)圖片太大的時(shí)候，會(huì)增加打包后的js文件大小击胜，因此設(shè)置好loader亏狰，小圖片打包成DataURL，大圖片依然跟file-url一樣打包到images文件夾下

section-2.3 & 2.4 使用 Loader 打包靜態(tài)資源（樣式篇）

打包c(diǎn)ss偶摔，必須使用下面兩個(gè)loader npm i style-loader css-loader -D

1. style-loader：負(fù)責(zé)把樣式添加到head上
2. css-loader：負(fù)責(zé)簡(jiǎn)析css語法
   兩者在配置中的順序不可顛倒骚揍，因?yàn)閣ebpack解析是從右到左，從下到上，這節(jié)的內(nèi)容這點(diǎn)需要注意信不，下面不再重復(fù)

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}

然而現(xiàn)在應(yīng)該很少會(huì)直接寫css嘲叔，而是借助sass/less/stylus這些工具，所以下面以sass為例抽活，先安裝sass-loader硫戈，sass-loader需要兩個(gè)包：sass-loader 和 node-sass
由于node-sass比較大，很容易因?yàn)榫W(wǎng)絡(luò)問題下載不了（因?yàn)楸粔Γ┫滤叮?dāng)時(shí)的報(bào)錯(cuò)我就不再特地復(fù)現(xiàn)然后截圖了丁逝，如果安裝不了的同學(xué)跟著我來就行了，正常都是因?yàn)楸粔ο螺d不了

1. 安裝淘寶npm鏡像： npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 使用cnpm來安裝：cnpm i sass-loader node-sass -D
   雖然我不寫options可以直接寫成數(shù)組梭姓，不過這里還是拿官網(wǎng)的來霜幼，因?yàn)檫@就是上面說的從下到上，還有注釋誉尖，根據(jù)注釋應(yīng)該也能理解為什么順序不能顛倒了

{
    test: /\.css$/,
    /* use: ['style-loader', 'css-loader', 'sass-loader'] */
    use: [
        {
            loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
        },{
            loader: "css-loader"   // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
        },{
            loader: "sass-loader"  // 將 Sass 編譯成 CSS
        }
    ]
}

對(duì)的css罪既，我們一般會(huì)用 postcss 來給一些支持度還不夠好的css3屬性加前綴 npm i postcss-loader -D
postcss還需要一份postcss.config.js（又或者命名為.postcssrc.js也行）配置，所以在webpack.config.js同級(jí)目錄下創(chuàng)建對(duì)應(yīng)的配置
我們需要使用postcss的autoprefixer插件來給css3支持度不夠好的屬性加前綴铡恕，下載插件 npm i autoprefixer -D
這里可能有人跟我一樣npm又是下載不了琢感，所以也用cnpm吧：cnpm i autoprefixer -D，如果你不想每次都去下載插件探熔，也能把postcss所有插件一次性下到node_modules里 npm i postcss-plugin -D

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

如果在sass文件中使用@import引入另外一個(gè)sass文件驹针，那么需要讓引入進(jìn)來的sass文件也走一遍postcss和sass-loader進(jìn)行處理，這個(gè)時(shí)候我們需要把 css-loader 寫成對(duì)象诀艰，在里面添加 importLoaders 參數(shù)（具體的其他參數(shù)請(qǐng)查閱官網(wǎng)）

{
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: "css-loader",
            options: {
                // 查詢參數(shù) importLoaders柬甥，用于配置「css-loader 作用于 @import 的資源之前」有多少個(gè) loader。
                // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                importLoaders: 2
            }
        },
        'sass-loader',
        'postcss-loader']
}

有些時(shí)候其垄，我們并不想css樣式全局使用苛蒲，部分要使用私有化處理（比如vue中給style添加的scope），那么需要在css-loader里添加 modules 參數(shù)

{
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: "css-loader",
            options: {
                importLoaders: 2,
                modules: true     // css模塊化捉捅，這個(gè)時(shí)候全局的 import index.sass將會(huì)失效
            }
        },
        'sass-loader',
        'postcss-loader']
}

對(duì)應(yīng)的撤防，index.js中對(duì)到sass文件也不能作為全局引入了，需要改寫成以下方式

import avatar from './avatar.jpg'
import style from './index.scss'
// import './index.scss' 這種直接無效

let root = document.getElementById("root")

let img = new Image()
img.src = avatar
img.classList.add(style.avatar)  // 原來直接寫的'avatar'將會(huì)失效棒口，具體原因看下面打包后的截圖
root.append(img)

樣式私有化 - modules

可見avatar類名被編譯成了_3WpIug-N0UMam_vssd03tO寄月，所以說如果不寫 style.avatar 的話，avatar類名將會(huì)無定義

對(duì)到css中用了字體文件的（或者icon-font）无牵，會(huì)加載諸如ttf/svg/eot等等這樣后綴的名字漾肮，這個(gè)時(shí)候需要使用上面的file-loader，因此為了簡(jiǎn)單化茎毁，圖片使用url-loader克懊，字體文件使用file-loader

{
    test: /\.(woff|eot|ttf|svg)$/,
    use: {
        loader: 'file-loader',
        options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'icon-font/'
        }
    }
},
{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 20480  //是否小于20KB
        }
    }
}

section-2.5 使用 plugins 讓打包更便捷

插件(plugins)

loader 被用于轉(zhuǎn)換某些類型的模塊忱辅，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括谭溉，從打包優(yōu)化和壓縮墙懂，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大扮念，可以用來處理各種各樣的任務(wù)损搬。

想要使用一個(gè)插件，你只需要 require() 它柜与，然后把它添加到 plugins 數(shù)組中巧勤。多數(shù)插件可以通過選項(xiàng)(option)自定義。你也可以在一個(gè)配置文件中因?yàn)椴煌康亩啻问褂猛粋€(gè)插件弄匕，這時(shí)需要通過使用 new 操作符來創(chuàng)建它的一個(gè)實(shí)例颅悉。
為了解決手動(dòng)把index.html加入到dist目錄里，可以使用 html-webpack-plugin 插件來指定默認(rèn)模板迁匠，使用clean-webpack-plugin 來實(shí)現(xiàn)每次打包之前刪除dist目錄剩瓶。執(zhí)行npm i html-webpack-plugin clean-webpack-plugin -D進(jìn)行安裝，webpack.config.js添加plugin參數(shù)

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
        template: './index.html'      // 以index.html作為html模板
    }),
    // 打包之前刪除dist目錄柒瓣，現(xiàn)在的新版是直接取output路徑儒搭，不需要自己寫刪除哪個(gè)打包后的文件夾
    new CleanWebpackPlugin()
]

Section-2.6 entry 與 output 的基礎(chǔ)配置

entry可以支持多入口文件吠架，比方說我們要在頁面手動(dòng)添加jq與邏輯代碼

entry: {
    jquery: './src/jquery.js',
    main: './src/index.js'
}

此時(shí)output也需要對(duì)應(yīng)的更改一下芙贫，不可將name寫固定，否則會(huì)因?yàn)槲募孛虬“仨毑粚懟蚴褂谜嘉环姆绞?/p>

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')  //__dirname指的是webpack.config.js這個(gè)文件所在的路徑
}

這樣打包出來的文件就會(huì)如下：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>

真正項(xiàng)目中，我們會(huì)給s文件添加cdn域名，這里只作為一個(gè)結(jié)果展示，所以使用的localhost:8080

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),  //__dirname指的是webpack.config.js這個(gè)文件所在的路徑
    publicPath: 'localhost:8080'     //給js添加cdn地址，這里沒有所以用這個(gè)來看看
}

<script type="text/javascript" src="localhost:8080/jquery.js"></script>
<script type="text/javascript" src="localhost:8080/main.js"></script>

Section-2.7 sourceMap的配置

當(dāng)我們進(jìn)行開發(fā)的時(shí)候，如果代碼出現(xiàn)問題痛悯，瀏覽器控制臺(tái)會(huì)進(jìn)行提示亲族。然而打包后的文件報(bào)錯(cuò)行數(shù)并不是我們真正開發(fā)的文件，這個(gè)時(shí)候我們就需要使用sourceMap來建立一個(gè)映射關(guān)系，好讓我們知道出問題的實(shí)際上是哪一個(gè)文件
在webpack.config.js文件中添加devtool參數(shù)筒扒，此選項(xiàng)控制是否生成，以及如何生成 source map。

module.exports = {
    mode: "development",
    devtool: 'cheap-module-eval-source-map',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

對(duì)到該配置對(duì)應(yīng)的一些關(guān)鍵詞：
source-map sourceMap 是一個(gè)映射關(guān)系仇箱，能直接映射到對(duì)應(yīng)的代碼文件
cheap 報(bào)錯(cuò)不精確到哪一行哪一列，只報(bào)錯(cuò)到行
inline 不生成map文件，直接以data64的形式寫進(jìn)打包后的js代碼里
module 對(duì)到第三方依賴，loader也進(jìn)行報(bào)錯(cuò)
eval 會(huì)生成一個(gè)eval()函數(shù)惶岭，把錯(cuò)誤寫到eval中，性能是最快的
因此铺罢，對(duì)到開發(fā)環(huán)境和線上環(huán)境辞居，我們需要寫不一樣的配置參數(shù)
development 開發(fā)環(huán)境一般配置為： devtool: 'cheap-module-eval-source-map'
production 正式環(huán)境一般配置為： devtool: 'cheap-module-source-map'
關(guān)于sourceMap的實(shí)現(xiàn)贼陶，可以閱讀以下文章：
打破砂鍋問到底：詳解Webpack中的sourcemap
Introduction to JavaScript Source Maps
JavaScript Source Map 詳解
需翻墻的油桶視頻

Section-2.8 使用 WebpackDevServer 提升開發(fā)效率

當(dāng)我們每次更改完代碼老翘，總需要去執(zhí)行npm run bundle墓怀，這樣太麻煩汽纠，所以需要讓webpack監(jiān)聽打包文件，這個(gè)時(shí)候我們需要在 package.json里去修改webpack傀履，添加 --watch來監(jiān)聽打包文件虱朵，讓webpack重新打包

"scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch"
  }

對(duì)到本地開發(fā)，需要自己去請(qǐng)求json打樁數(shù)據(jù)钓账，這個(gè)時(shí)候就必須開啟一個(gè)服務(wù)器碴犬，而webpack-dev-server就能為我們構(gòu)建一個(gè)本地服務(wù)器
在webpack.config.json里添加 devServer，更多的參數(shù)請(qǐng)直接查閱官網(wǎng)梆暮，webpack并沒有自帶webpack-dev-server翅敌，所以需要安裝 npm i webpack-dev-server -D

devServer: {
    // 服務(wù)器開啟在哪個(gè)文件夾下，因?yàn)槲覀僶utput寫的是dist惕蹄，所以在此目錄下創(chuàng)建本地服務(wù)器
    contentBase: './dist',
    open: true,  // 打包完成后自動(dòng)打開瀏覽器
    proxy: {  // 接口代理蚯涮，參考另一篇vue模擬去哪兒網(wǎng)的文章，里面去請(qǐng)求的json請(qǐng)求全都走了代理
        '/api': 'http://localhost:80'
    }
}

此時(shí)在package.json里添加一條start命令來啟動(dòng)webpack-dev-server

"scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  }

除了在git命令行里運(yùn)行webpack卖陵，還可以在node中使用weback遭顶，在以前devServer還不成熟的時(shí)候，開發(fā)者是直接通過自己寫node server來開啟本地服務(wù)的泪蔫，當(dāng)在node里執(zhí)行webpack的時(shí)候棒旗，devServer將直接被忽略，所以可以不刪除
這里需要借助express 和 webpack-dev-middleware（中間件） 來實(shí)現(xiàn)撩荣，執(zhí)行 npm i express webpack-dev-middleware -D安裝這兩個(gè)node模塊
在package.json里創(chuàng)建一個(gè)server.js铣揉，scripts里添加一條server命令，使用node執(zhí)行server.js

"scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "server": "node server.js"
}

/* server.js */
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleWare = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config); //webpack編譯器餐曹，編譯器執(zhí)行一次代碼就會(huì)打包一次

const app = express();

app.use(webpackDevMiddleWare(complier, {
    // 打包輸出逛拱，因?yàn)槲也辉趙ebpack.config.js里寫publicPath，所以這里可以不寫
    // publicPath: config.output.publicPath  
}));

app.listen(3000, () => {  // 本地服務(wù)器端口號(hào)為3000
    console.log('server is running');
})

執(zhí)行npm run server台猴，打開瀏覽器 localhost:3000朽合，這個(gè)時(shí)候也能正常運(yùn)行webpack打包后的文件，對(duì)到devServer里的很多東西饱狂，如果想實(shí)現(xiàn)還需要自己再添加很多模塊曹步，所以一般還是直接使用devServer來運(yùn)行與配置本地服務(wù)

Section-2.9&2.10 Hot Module Replacement 熱模塊更新

模塊熱替換 (Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運(yùn)行時(shí)更新各種模塊休讳，而無需進(jìn)行完全刷新讲婚。
熱更新是weback的功能，所以需要在webpack.config.js中引入webpack

const webpack = require('webpack');

devServer添加hot參數(shù)

devServer: {
    contentBase: './dist',
    open: true,
    proxy: {  // 接口代理
        '/api': 'http://localhost:80'
    },
    hot: true,     //webpack-dev-server開啟熱更新
    hotOnly: true  //html沒生效俊柔，瀏覽器不刷新
},
plugins: [
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin() // 前面說了熱更新是webpack的功能筹麸，所以需要作為插件加進(jìn)來
]

這樣在修改css的時(shí)候纳猫，頁面不會(huì)重新刷新，只會(huì)重新渲染
但是對(duì)到j(luò)s因?yàn)闆]有l(wèi)oader來幫我們做這些事竹捉，所以需要自己進(jìn)行監(jiān)聽 模塊熱更新芜辕，通過accept來實(shí)現(xiàn)

if(module.hot) {
    module.hot.accept('./num', () => {
        // console.log(num)
        // num.reset()
        
        root.removeChild(num.block)
        num = new Num();
        root.appendChild(num.block)
    })
}

class StaticDiv {
    constructor () {
        this.num = 2000
        this.block = document.createElement('div')
        this.block.innerHTML = this.num
    }
    // reset () {
    //     this.block.innerHTML = this.num
    // }
}

export default StaticDiv

這里比較坑爹，個(gè)人嘗試后發(fā)現(xiàn)块差，上面的注釋是沒用的侵续，內(nèi)存里的值還是原來那個(gè)，原本我并不想跟文檔里一樣將這個(gè)節(jié)點(diǎn)刪掉重新加入憨闰，但是不行状蜗，重新innerHTML也是不行的，如我說的鹉动，內(nèi)存沒變轧坎，文件怎么修改num的值，index.js還是原來初始化頁面的2000泽示，無解缸血，不知道vue底層怎么做的，技術(shù)不到位這里只做記錄

Section-2.11&2.12 使用 Babel 處理 ES6 語法

當(dāng)我們寫es6的時(shí)候械筛，由于需要兼容一些低版本瀏覽器捎泻，所以需要將es6轉(zhuǎn)換為es5，這個(gè)時(shí)候我們需要使用 babel
跟著官網(wǎng)進(jìn)行安裝即可埋哟，進(jìn)入setup（設(shè)置）進(jìn)行查看
執(zhí)行npm instal babel-loader @babel/core -D安裝babel
實(shí)際上babel并不會(huì)對(duì)代碼進(jìn)行解析笆豁，官網(wǎng)上寫的就是將代碼直接輸出而已，需要解析我們需要使用@babel/preset-env這個(gè)插件來解析赤赊，執(zhí)行npm install @babel/preset-env -D 進(jìn)行安裝
單純這樣解析出來的ES5實(shí)際上一些低版本瀏覽器依然不識(shí)別闯狱，所以還需要使用 babel-polyfill 來進(jìn)行進(jìn)行解析
webpack.config.js里添加打包規(guī)則

{
    test: /\.js$/,
    exclude: /node_modules/,  // 如果代碼是在node-modules，則排除
    loader: "babel-loader",   //webpack與babel的橋梁抛计，并不會(huì)進(jìn)行解析
    options: {
        presets: [['@babel/preset-env', {  // 解析es6語法
            useBuiltIns: 'usage',          // @babel/polyfill哄孤，用到的語法加入低版本解析，而不是全部加載進(jìn)去
            corejs: 2,
            targets: {
                chrome: "67"  // 打包的目標(biāo)是兼容chrome67以上爷辱，實(shí)際如果寫這個(gè)babel不會(huì)解析录豺，因?yàn)橹С謊s6語法
            }
        }]]
    }
}

執(zhí)行npm install --save @babel/polyfill進(jìn)行安裝
這里我嘗試后如果不寫corejs的版本，默認(rèn)會(huì)以corejs2.x來（可以看編譯時(shí)輸出的提示）饭弓，還需要注意，不能使用 --save-dev 去安裝polyfill和corejs媒抠，因?yàn)樗麄兪切枰谖募^部引入的（因?yàn)檫@不是編譯工具弟断，他是增加拓展，往js里加代碼的趴生，我說的應(yīng)該夠直白易懂了吧）
還有阀趴，其實(shí)我寫的是corejs: 3昏翰，因?yàn)槲沂褂貌粚懟驅(qū)慶orejs: 2的時(shí)候，打包一直報(bào)沒有各種模塊刘急，即使我刪除重裝還是一樣棚菊，不確定是不是core-js版本問題

使用core2后一直提示沒有對(duì)應(yīng)模塊，而我看了一下是有的

執(zhí)行npm install --save @babel/runtime-corejs3叔汁，關(guān)于 corejs3的一些問題 可以參考這里统求，然而對(duì)到插件有些新增的我寫了以后反而導(dǎo)致 useBuiltIns 無效了，代碼打包后變得特別大据块，所以下面我全都注釋掉了

package.json

/* webpack.config.js */
{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        presets: [['@babel/preset-env', {
            useBuiltIns: 'usage',
            corejs: 3,  // 如果文件引入polyfill反而會(huì)出警告
            targets: {
                chrome: "30" // 故意寫很低
            } 
        }]]
    }
}

/* index.js */
// import "@babel/polyfill";
// import "core-js/stable";
// import "regenerator-runtime/runtime";

const arr = [
    new Promise(() => {}),
    new Promise(() => {})
]

arr.map(item => {
    consele.log(item)
})

插件（plugin）和預(yù)設(shè)（preset）

代碼轉(zhuǎn)換功能以插件的形式出現(xiàn)码邻，插件是小型的 JavaScript 程序，用于指導(dǎo) Babel 如何對(duì)代碼進(jìn)行轉(zhuǎn)換另假。你甚至可以編寫自己的插件將你所需要的任何代碼轉(zhuǎn)換功能應(yīng)用到你的代碼上像屋。例如將 ES2015+ 語法轉(zhuǎn)換為 ES5 語法，我們可以使用諸如 @babel/plugin-transform-arrow-functions 之類的官方插件

Polyfill 是會(huì)污染全局環(huán)境的（添加全局范圍（global scope）和類似 String 這樣的內(nèi)置原型（native prototypes）中）边篮，因此我們?cè)夙?xiàng)目工程中一般使用 presets己莺，寫第三方類庫使用 plugin，通過 @babel/plugin-transform-runtime 來實(shí)現(xiàn)
需要三個(gè)插件

1. npm install --save-dev @babel/plugin-transform-runtime 不會(huì)污染全局環(huán)境戈轿，會(huì)以閉包的形式去注入對(duì)應(yīng)的內(nèi)容
2. npm install --save @babel/runtime
3. npm install --save @babel/runtime-corejs2 如果corejs改成2篇恒，這里需要安裝corejs2，這里看不懂凶杖，只知道一般需要改成2胁艰，沒去查閱更多資料
   實(shí)際中我們可能會(huì)在babel寫很多配置，因此更好的做法是建立 .babelrc 文件智蝠，將 options 挪到該文件中腾么，具體查閱 bable中的配置 ，刪除babel的options

// .babelrc
"plugins": [["@babel/plugin-transform-runtime",{
    "corejs": 2,
    "helps": true,
    "regenerator": true,
    "useESModules": false
}]]