最新版dropzone.js在IE11中失效，报Symbol未定义错误如何解决？

这个问题我之前帮同事排查过，本质是最新版Dropzone.js已经放弃了对IE11的支持，用到了IE11完全不兼容的ES6特性（比如Symbol），所以才会抛出'Symbol' is undefined的错误。给你几个可行的解决思路：

1. 回退到最后一个支持IE11的Dropzone版本 #

Dropzone从v6.x系列开始就正式停止了对IE11的支持，你可以回退到v5.9.3版本——这是官方声明支持IE11的最后一个版本：

• 如果你用npm/yarn管理依赖，执行命令：

  npm install dropzone@5.9.3
  # 或者用yarn
  yarn add dropzone@5.9.3
  

• 如果是直接引入脚本，替换你当前的Dropzone脚本为该版本的本地文件即可。

2. 引入ES6 Polyfill补全IE11缺失的特性 #

如果你不想降级版本，可以通过引入Polyfill让IE11支持Symbol等ES6核心特性，推荐使用core-js：

1. 确保在Dropzone脚本之前加载core-js的Polyfill文件，比如在HTML中按以下顺序引入：

   <script src="path/to/core-js-bundle.min.js"></script>
   <script src="path/to/dropzone.min.js"></script>
   

2. 如果你用Webpack/Rollup这类构建工具，直接在项目入口文件顶部添加：

   import 'core-js/stable';
   import Dropzone from 'dropzone';
   

   这样会自动注入IE11需要的所有Polyfill。

3. 通过Babel转译Dropzone代码（适用于构建类项目） #

如果你的项目用了构建工具，可以配置Babel转译Dropzone的代码，使其兼容IE11：

1. 安装必要的依赖：

   npm install @babel/core @babel/preset-env core-js --save-dev
   

2. 在项目的Babel配置文件（比如babel.config.json）中添加如下配置：

   {
     "presets": [
       ["@babel/preset-env", {
         "targets": {
           "ie": "11"
         },
         "useBuiltIns": "usage",
         "corejs": 3
       }]
     ]
   }
   

3. 调整构建工具的配置，确保它会处理node_modules中的Dropzone代码（默认很多构建工具会排除第三方依赖，需要修改规则包含Dropzone）。

完成上述任意一种方案后，再按照你的测试步骤去IE11中验证：打开页面后，Dropzone区域应该可以正常点击和拖拽文件，控制台也不会再出现Symbol相关的错误。

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