大佬们,IE浏览器怎么适配啊

Question

前端项目没有用目前主流的三大框架,公司自己开发的.

第一次做IE浏览器适配,用的@babel/preset-env
他文档里写的它可以帮我调整代码,我不需要再花时间,但是我用IE浏览器打开之后,他还是有问题啊,其他的浏览器都是好的.

像是IE浏览器用parentElement只能取到null,或者svg.text里的innerHTML无效.这些问题@babel/preset-env不会帮我处理好吗?是我理解不对吗?

webpack

test: /.js$/,
exclude: /node_modules/,
use: [{
    loader: 'babel-loader',
    options: {
        "presets": [["@babel/preset-env"]]
    }
}]

.broswerlistrc

ie >= 9
last 1 Edge version
last 1 Firefox version
last 1 Chrome version
last 1 Safari version

Answer 1

得看你的项目能不能做兼容，有一些需求是做不了兼容的，
然后 babel 也可以声明你需要兼容的浏览器版本，例如：

module: {
  rules: [
    { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
        options:{
            presets: [["@babel/preset-env",{
                targets:{
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1",
                    ie:"11"
                }
                useBuiltIns:'usage'
            }]]
        }
    }
  ]
}

再附上一篇其它大佬写的文章以供参考： ✈ ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍（下）

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

遇到IE果断放弃是最好的。

已参与了 SegmengtFault 思否 「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

装了babel-polyfill这个依赖吗？这个依赖才是做兼容的哦，将一些浏览器不支持的js语法转换成支持的语法。详见babel-polyfill。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 4

jQuery ，永远的神。
除了直接引入 jQuery 之外，你也可以研究下 jQuery 对应的那些方法是如何实现的，然后把它搬到你的代码里或者用它的方法来覆盖一些原生方法(需要说明的是，不恰当的替换是有循环调用的风险的)，但是这样还不如直接用 jQuery。