如何用Babel转译Node模块及其依赖？解决IPFS-API的IE11兼容问题

云原生阿岚

2026-5-26

嘿，这两个问题都是前端兼容和模块转译里的常见痛点，我来一步步帮你解决：

如何使用Babel转译一个Node模块及其所有依赖项？

默认情况下，Babel会自动跳过node_modules目录，因为大多数第三方依赖已经预先编译成了兼容的ES5代码。但如果你确实需要转译自己的模块加上所有依赖，可以按以下步骤操作：

安装核心Babel工具
先把必要的依赖装到位：
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env
```
如果你是用Webpack构建项目，还需要额外安装babel-loader：
```
npm install --save-dev babel-loader
```

配置Babel以包含依赖目录
在项目根目录创建babel.config.json（这种配置方式支持项目全局生效，比.babelrc更灵活），调整规则让Babel不再忽略node_modules，或者精准指定要转译的包：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current" // 根据你当前的Node版本调整目标环境
        }
      }
    ]
  ],
  "ignore": [] // 清空默认的ignore列表，默认会包含node_modules，所以这里要手动去掉
}

⚠️ 注意：转译整个node_modules会大幅增加构建时间，所以除非所有依赖都未编译，否则更推荐只转译需要的依赖。比如把特定依赖加入include：

{
  "presets": ["@babel/preset-env"],
  "include": [
    "./src/**/*", // 你的源码目录
    "./node_modules/需要转译的依赖名/**/*"
  ]
}

执行转译命令
如果用babel-cli直接转译，运行：

npx babel src --out-dir dist --copy-files

如果是Webpack项目，确保webpack.config.js里的babel-loader配置和Babel配置同步：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/需要转译的依赖名')
        ],
        use: 'babel-loader'
      }
    ]
  }
}

解决IE11中ipfs-api及关联模块未转译的问题

IE11对ES6+语法和新API的支持几乎为零，而ipfs-api及其依赖（比如libp2p、ipfs-utils这类）大概率用了未转译的箭头函数、解构赋值等语法，所以需要把这些模块纳入Babel转译范围，同时补充必要的polyfill：

调整Webpack配置，让Babel转译ipfs-api及其依赖
默认Webpack的babel-loader会排除整个node_modules，所以我们需要用正则的负向前瞻来让它不跳过ipfs-api和它的核心依赖。修改webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules中除了指定依赖之外的所有包
        exclude: /node_modules\/(?!(ipfs-api|libp2p|ipfs-utils|multiaddr)\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

你可以根据IE11控制台的报错信息，把用到的未转译依赖逐个加入到正则的括号里。

配置Babel自动引入polyfill
IE11不仅不支持ES6语法，还缺少很多新的JS API（比如Promise、Array.prototype.includes），所以需要引入polyfill来补全。修改babel.config.json：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage", // 自动按需引入polyfill，避免打包冗余代码
        "corejs": 3 // 指定corejs版本，需要提前安装
      }
    ]
  ]
}

然后安装core-js：

npm install core-js@3

优化转译结果（可选）
如果你想避免重复引入polyfill，减少打包体积，可以用@babel/plugin-transform-runtime：

npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime-corejs3

然后在Babel配置中加入这个插件：

{
  "presets": [/* 之前的preset配置 */],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

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