前端開發(fā)過程中，很可能需要兼容IE瀏覽器（雖然很無奈就是了），在兼容IE瀏覽器時(shí)要十分小心，因?yàn)镮E是不支持es2015以上的，所以你可能會(huì)發(fā)現(xiàn)Promise、箭頭函數(shù)等方式通通報(bào)錯(cuò)。

Webpack

前端項(xiàng)目化的過程中，很多都會(huì)使用到Webpack、Gulp等工具。

這里我使用的是Webpack，對于Webpack的項(xiàng)目配置因?yàn)橐郧耙簿唧w說過，所以這里不再做過多的講述了。

參考鏈接：

• 簡單的前端項(xiàng)目配置
• webpack打包typescript
• webpack5熱更新打包TS

一、使用的javascript包管理工具是yarn, 先使用yarn init命令進(jìn)行項(xiàng)目的創(chuàng)建。

二、使用yarn add安裝項(xiàng)目所需要的webpack包

命令：yarn add webpack webpack-cli webpack-dev-server

三、在項(xiàng)目文件夾中創(chuàng)建webpack.config.js，配置基礎(chǔ)的結(jié)構(gòu)。文件夾中創(chuàng)建需要的入口文件main.js

const path = require('path');  // node自帶包
const webpack = require('webpack');

module.exports = {
    //  希望打包的文件
    entry:'./main.js',
    output:{
        filename:'main_out.js',   // 輸出文件名稱
        path:path.resolve(__dirname,'./build/'),  //獲取輸出路徑
    },
    mode: 'development',   // 整個(gè)mode 可以不要，模式是生產(chǎn)壞境就是壓縮好對，這里配置開發(fā)壞境方便看生成對代碼
    module:{
        rules: [
        ]
    },
    resolve: {
        extensions: ['.js']      // 解析對文件格式
    },
    devServer: {
        hot: false, //開啟熱更新
        // 命令行中會(huì)顯示打包的進(jìn)度
        progress: false,
        liveReload: true,
        port: 9000,
        filename: 'main_out.js',
    },
    plugins: [
        //熱更新插件
        new webpack.HotModuleReplacementPlugin()
    ],
    target: ['node', 'es5'],  // 這里我提前設(shè)置了es5
}

四、在package.json中添加scripts運(yùn)行命令

"scripts": {
    "dev": "webpack --mode development",
    "start": "webpack serve --config webpack.config.js --mode development"
}

這樣基礎(chǔ)的webpack就配置好了，現(xiàn)在我們可以在main.js中寫一些語句

class A {
    a;
    constructor(a) {
        this.a = a;
    }
}

let a1 = new A(10);
console.log(a1);

此時(shí)在終端當(dāng)中運(yùn)行yarn dev，會(huì)生成build文件夾中的main_out.js文件。

main_out.js的內(nèi)容

使用node運(yùn)行main_out.js，可以看到輸出的結(jié)果

注意： 這里有一個(gè)地方，在webpack.config.js中我設(shè)置target為[‘node’, ‘es5’]，如果不添加es5，生成的main_out.js中會(huì)有箭頭函數(shù)，這樣如果將main_out.js引入，在IE瀏覽器當(dāng)中是會(huì)出現(xiàn)報(bào)錯(cuò)的。

Babel

通過上面的target配置，可能會(huì)讓人以為已經(jīng)能夠讓IE兼容ES6之后的方式。

但是實(shí)際上，對于promise、Set、class等使用，還是無法編譯為IE瀏覽器可以使用的js。

在main.js添加以下代碼：

class A {
    a;
    constructor(a) {
        this.a = a;
    }
}
let a1 = new A(10);
console.log(a1);
let pro = new Promise((resolve, reject)=>{ });
console.log(pro);

let set = new Set([1,2,3,3,7,8,4,7]);
console.log(set);

在yarn dev生成main_out.js，在node運(yùn)行時(shí)或者在chrome瀏覽器中運(yùn)行都是能正常的。

但是在IE上還是出現(xiàn)了報(bào)錯(cuò)：

安裝Babel

這里就需要引入Babel插件了

介紹: Babel 是一個(gè)工具鏈，主要用于將采用 ECMAScript 2015+ 語法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。

官方網(wǎng)址: https://www.babeljs.cn/docs/

接下來讓我開始安裝Babel

命令： yarn add @babel/core @babel/cli babel-loader -D

這里的@babel/core是babel核心組件，@babel/cli是Babel 自帶了一個(gè)內(nèi)置的 CLI 命令行工具，可通過命令行編譯文件。

除了上述的兩個(gè)插件外，接下來需要安裝一些其他需要的babel組件

命令：yarn add @babel/preset-env @babel/polyfill @babel/runtime -D

這里面的@babel/polyfill是一個(gè)core-js和generation runtime的合集,安裝之后在配置文件里配合@babel/preset-env使用即可。而@babel/runtime的作用與@babel/polyfill類似，區(qū)別是它使用了一些helper函數(shù)來對局部進(jìn)行擴(kuò)展，不會(huì)污染全局環(huán)境

配置Babel

接下來就需要配置Babel

一、創(chuàng)建一個(gè).babelrc文件，這里面寫如Babel需要支持的配置

{
    "presets": [
        ["@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 2, // 新版本的@babel/polyfill包含了core-js@2和core-js@3版本，所以需要聲明版本，否則webpack運(yùn)行時(shí)會(huì)報(bào)warning
            }
        ]
    ],
}

二、webpack.config.js中配置rules，這里使用exclude表示哪些目錄中的 .js 文件不要進(jìn)行 babel-loader

rules: [
    {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
        },
        exclude:'/node_modules/',
    }
]

現(xiàn)在我的package中配置如下：

此時(shí)再運(yùn)行yarn dev，生成的main_out.js就可以在IE瀏覽器中使用了

注意:因?yàn)?strong>Babel版本的更迭，所以網(wǎng)上很多教程其實(shí)版本可能不太一樣，安裝的插件也不同了。之前我參考一個(gè)教程，安裝了Core-js，就一直報(bào)錯(cuò)，可能是產(chǎn)生了沖突，移除后就好了。配置項(xiàng)目真的是趟坑躺過來的…