Babel transpile systemjs 模块跳过特定模块？答案

【问题标题】：Babel transpile systemjs module skip specific modules?Babel transpile systemjs 模块跳过特定模块？
【发布时间】：2018-03-29 04:26:31
【问题描述】：

我有一个香草 Cordova 应用程序。但它是一个 Cordova 应用程序这一事实并不重要，只需将其视为一个普通网站即可。现在大多数脚本都是通过<script> 标签加载的。最近添加了带有 env 预设的 gulp 和 Babel 转译。我想开始迁移到 Systemjs 支持的 ES2015 模块。但是，因为有很多遗留代码（有些部分我不知道它在做什么，很多全局变量等），我想逐个文件迁移到 ES2015 模块。有没有办法让 Babel 不要对某些文件进行模块转换（但最好是为其他 ES2015 功能进行转换）？如果它不会与没有任何 export 语句的文件混淆，那将很有用。

【问题讨论】：

标签： javascript ecmascript-6 babeljs

【解决方案1】：

查看此处的ignore 或only babel.rc 选项：https://babeljs.io/docs/usage/api/#options

【讨论】：

有了这个我不能说我想要一个文件转译到 ES2015，但不要让它成为一个模块，对吗？
之所以会这样，是因为我已经使用了一些 ES2015 特性，所以可能很难找到它们在哪些文件中。

【解决方案2】：

您可以将 babel 构建任务分为两部分。第一遍编译所有文件而不转换模块，第二遍仅将模块转换应用于您手动更新的文件列表。

下面是 gulp 和 gulp-filter 的样子：

const gulp = require("gulp");
const babel = require("gulp-babel");
const filter = require("gulp-filter");

const esmReady = ["src/somefile.js"];

gulp.task("default", () => {
  const f = filter(esmReady, { restore: true });
  gulp
    .src("src/*.js")
    .pipe(
      babel({
        presets: [["env", { modules: false }]]
      })
    )
    .pipe(f)
    .pipe(
      babel({
        plugins: ["transform-es2015-modules-systemjs"]
      })
    )
    .pipe(f.restore)
    .pipe(gulp.dest("dist"));
});

【讨论】：