如何在Babel转译SystemJS模块时跳过特定模块？Cordova项目迁移

嘿，这种渐进式迁移的思路太明智了——面对一堆遗留代码和未知全局变量，逐文件迁移确实能把风险降到最低。我来给你几个落地性强的方案，帮你搞定Babel跳过特定模块的需求：

一、在Gulp任务里直接排除目标文件 #

既然你是用Gulp驱动转译流程，最直接的方式就是在Gulp的src配置里用排除语法跳过不需要处理的文件。举个例子，你的Gulp任务可以这么写：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('transpile-modules', () => {
  return gulp.src([
      'src/**/*.js', // 匹配所有JS文件
      '!src/legacy-code/**/*.js', // 整个遗留目录直接跳过
      '!src/libs/old-global-lib.js' // 单个特定文件也能单独排除
    ])
    .pipe(babel({
      presets: ['@babel/preset-env'],
      modules: 'system' // 别忘了设置成SystemJS的模块格式
    }))
    .pipe(gulp.dest('dist'));
});

这里的!就是Gulp的排除标记，你可以根据自己的目录结构灵活调整，想跳过啥就排除啥。

二、用Babel配置文件统一管理忽略规则 #

如果不想把排除路径硬写在Gulp任务里，也可以在Babel的配置文件（比如.babelrc或者babel.config.json）里设置ignore字段，把要跳过的文件/目录列进去：

示例：.babelrc #

{
  "presets": ["@babel/preset-env"],
  "modules": "system",
  "ignore": [
    "./src/legacy-code/**/*.js",
    "./src/libs/old-global-lib.js"
  ]
}

这种方式把Babel的转译规则和Gulp任务解耦了，后续调整忽略列表只改Babel配置就行，维护起来更方便。

三、单个文件专属：用注释让Babel直接跳过 #

要是只是个别零散文件需要跳过，不用改全局配置，直接在文件顶部加个特殊注释就行：

// @babel-ignore
// 这是老的全局变量文件，不用转成SystemJS模块
window.LegacyUtils = {
  // ... 各种遗留逻辑
};

Babel看到这个注释就会直接跳过整个文件的转译，非常灵活。

四、SystemJS侧的配合：兼容遗留全局变量 #

跳过转译的文件还是以全局变量的形式存在，你得在SystemJS这边做点配置，确保它们和模块系统和平共处：

1. 先按原来的方式用<script>标签加载这些遗留文件（注意加载顺序，别搞乱依赖关系）；
2. 要是已迁移的ES模块需要调用这些全局变量，还能在SystemJS配置里把全局变量映射成模块，让代码风格更统一：

SystemJS.config({
  map: {
    'legacy-utils': 'empty:'
  },
  meta: {
    'legacy-utils': {
      exports: 'LegacyUtils' // 把全局的LegacyUtils变量导出成模块
    }
  }
});

这样已迁移的模块就能通过import LegacyUtils from 'legacy-utils'来调用遗留代码，不用直接操作window对象，代码更规范。

最后提个小建议：迁移过程中可以给已转译的模块统一加上.mjs后缀，或者在SystemJS配置里区分模块文件和遗留文件，避免加载时混淆。

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