使用Babel编译webcomponentsjs适配IE9遇MutationObserver未定义错误的解决方法

嘿，这个问题我之前帮同行排查过——核心点在于IE9本身完全没有MutationObserver这个API，哪怕是IE11的兼容模式也不会自带它。webcomponentsjs虽然有对应的polyfill，但你大概率是在编译或引入环节没处理到位，下面给你一步步捋清楚解决方案：

1. 先确保完整引入webcomponentsjs的polyfill包 #

webcomponentsjs专门做了针对旧浏览器的补全包，其中就包含MutationObserver的替代实现。你必须把这个polyfill放在所有业务代码之前加载：

• 如果用npm管理依赖，直接在项目入口文件最顶部加：

  import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
  

• 要是用纯HTML引入，就把script标签放在业务代码的script前面：

  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  

  这个bundle已经打包了所有必要的polyfill，专门适配IE9这类老浏览器。

2. 调整Babel配置，精准适配IE9 #

Babel默认配置不会覆盖IE9的所有兼容需求，你得修改你的.babelrc或者babel.config.js：

• 先装必要的依赖：

  npm install @babel/preset-env @babel/plugin-transform-classes @babel/plugin-transform-proto-to-assign --save-dev
  

• 然后把目标浏览器设为IE9，同时开启自动引入polyfill：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "9"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }]
    ],
    "plugins": [
      "@babel/plugin-transform-classes",
      "@babel/plugin-transform-proto-to-assign"
    ]
  }
  

  这里useBuiltIns: "usage"会自动根据IE9的缺失API引入core-js的补全，后面两个插件是为了处理ES6类在IE9里的原型继承问题，避免报错。

3. 检查打包工具（比如webpack）的配置 #

如果用webpack打包，得确保polyfill不会被tree-shaking干掉，而且被正确编译：

• 在webpack.config.js的入口里把polyfill放在最前面：

  module.exports = {
    entry: [
      '@webcomponents/webcomponentsjs/webcomponents-bundle.js',
      './src/index.js'
    ],
    // 其他打包配置...
  };
  

• 另外，别把node_modules/@webcomponents/webcomponentsjs排除在Babel编译之外——它的代码本身也需要被转译才能在IE9里跑。

4. 验证polyfill是否生效 #

在IE11的IE9兼容模式下打开页面后，打开控制台输个命令检查：

console.log(typeof MutationObserver);

如果返回"function"就说明没问题了；要是还是"undefined"，那肯定是polyfill加载顺序错了，或者有代码在polyfill加载前就调用了MutationObserver，得排查一下执行顺序。

内容的提问来源于stack exchange，提问作者AxD