如何让Browserify转译引入的ES6第三方NPM包至ES2015兼容IE11？

嘿，这个问题我之前在项目里踩过坑！IE11对ES6语法的兼容性真的让人头大，尤其是第三方包没做转译的情况，下面几种方法能帮你搞定Browserify转译第三方依赖的问题：

方法1：用babelify的global选项精准转译指定第三方包 #

这是最常用的方案，核心是告诉Browserify：哪些第三方包需要被Babel转译。

首先安装必要的依赖：

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

命令行方式 #

直接在Browserify打包命令里配置babelify，通过ignore规则指定要转译的包：

browserify src/index.js -t [ babelify --presets [ @babel/preset-env ] --global --ignore node_modules/(?!lodash-es|my-es6-package) ] -o dist/bundle.js

这里的node_modules/(?!lodash-es|my-es6-package)是正则规则，意思是不忽略lodash-es和my-es6-package这两个包（也就是要转译它们），其他node_modules里的包跳过，避免无意义的转译浪费时间。

package.json配置方式 #

如果不想每次敲长命令，可以把配置写到package.json里：

{
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": ["@babel/preset-env"],
          "global": true,
          "ignore": "node_modules/(?!lodash-es|my-es6-package)"
        }
      ]
    ]
  }
}

之后直接运行browserify src/index.js -o dist/bundle.js就会自动应用这个配置。

方法2：用browserify-transform-tools自定义转译规则 #

如果需要更灵活的控制（比如根据文件路径、模块名的复杂规则来判断是否转译），可以用这个工具写自定义transform。

先安装依赖：

npm install browserify-transform-tools babelify @babel/core @babel/preset-env --save-dev

然后在项目根目录创建一个自定义transform脚本，比如transform-es6-deps.js：

const transformTools = require('browserify-transform-tools');
const babelify = require('babelify');
const fs = require('fs');

module.exports = transformTools.makeRequireTransform(
  'es6-deps-transform',
  { evaluateArguments: true },
  function(args, opts, cb) {
    // 在这里列出需要转译的第三方包名
    const es6Packages = ['lodash-es', 'my-es6-package'];
    const moduleName = args[0];
    
    // 如果引入的模块是目标包，就用babelify转译
    if (es6Packages.some(pkg => moduleName.startsWith(pkg))) {
      babelify(opts.file, { presets: ['@babel/preset-env'] })
        .on('error', cb)
        .pipe(fs.createWriteStream(opts.file))
        .on('finish', () => cb(null));
    } else {
      cb(null);
    }
  }
);

最后在打包命令里使用这个自定义transform：

browserify src/index.js -t ./transform-es6-deps.js -o dist/bundle.js

方法3：手动预处理第三方包（适合依赖较少的场景） #

如果你的ES6第三方包不多，手动转译后再引入也是个靠谱的选择，控制度拉满：

1. 在项目根目录新建vendor文件夹，把需要转译的第三方包复制进去（比如从node_modules里拷贝）
2. 用Babel转译这个文件夹：

npx babel vendor --out-dir vendor-transpiled --presets @babel/preset-env

3. 在你的代码里替换原来的引入路径，改用转译后的版本：

// 原来的引入
// import _ from 'lodash-es';
// 替换成转译后的版本
import _ from './vendor-transpiled/lodash-es';

额外注意事项 #

• 指定目标浏览器：记得在.babelrc里配置@babel/preset-env的目标浏览器，让Babel只转译IE11不支持的语法，提高打包效率：

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

• Polyfill缺失问题：IE11还不支持Promise、Array.prototype.includes等特性，即使转译了语法，这些API还是需要polyfill。安装core-js和regenerator-runtime，然后在代码最开头引入：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

• 测试验证：一定要在IE11里实际运行打包后的代码，避免遗漏某些兼容性问题。

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