Gulp concat 输出带有导入语句的文件以及带有相同标识符的导出？

Question

gulpfile.js:

const gulp = require("gulp");
const concat = require("gulp-concat");
const sass = require("gulp-sass")(require("sass"));
const ts = require("gulp-typescript");
const del = require("del");

const outputFolder = "dist";

const cleanWorkload = (cb) => {
  del.sync([outputFolder]);
  cb();
};

/* WORKLOADS */
const scssWorkload = () => gulp.src("src/scss/index.scss").pipe(sass()).pipe(gulp.dest(outputFolder));
const tsWorkload = () =>
  gulp
    .src("src/ts/**/*.ts")
    .pipe(
      ts({
        module: "es6",
        target: "es5",
        lib: ["DOM", "DOM.Iterable", "ESNext"],
      })
    )
    .pipe(concat("tree.js"))
    .pipe(gulp.dest(outputFolder));

/* DEFAULT */
const directCompilation = gulp.parallel(scssWorkload, tsWorkload);
gulp.task("default", gulp.series(cleanWorkload, directCompilation));

/* WATCH */
gulp.task("watch", () => {
  gulp.watch("src/scss/**/*.scss", scssWorkload);
  gulp.watch("src/ts/**/*.ts", tsWorkload);
});

源文件的片段：

import ElementCreator from "./helpers/ElementCreator";
import Branch from "./types/Branch.interface";
import BranchDescription from "./types/BranchDescription.interface";
import TreeConfig from "./types/TreeConfig.interface";

export default class Tree {
  private $el: HTMLElement;
  private branches: Branch[];
...

问题是当我运行 gulp 输出文件包含这个：

import ElementCreator from "./helpers/ElementCreator";
var Tree = /** @class */ (function () {
    function Tree(config) {
...

var ElementCreator = /** @class */ (function () {
    function ElementCreator() {
    }
...

因此浏览器抱怨 ElementCreator 已经被声明

我如何告诉 gulp 删除所有这些导入语句，因为文件无论如何都是串联的？

Answer 1

经过进一步搜索，我找到了一个比较可行的解决方案：
首先，你需要做 npm i gulp-strip-import-export
其次，将 tsWorkload 改写如下：

const tsWorkload = () =>
  gulp
    .src("src/ts/**/*.ts")
    .pipe(
      ts({
        module: "es6",
        target: "esnext",
        lib: ["DOM", "DOM.Iterable", "ESNext"],
      })
    )
    .pipe(stripImportExport())
    .pipe(babel({ presets: ["@babel/env"] }))
    .pipe(concat("tree.js"))
    .pipe(gulp.dest(outputFolder));

第三，在你的所有文件中使用 export ClassName 而不是 export default ClassName

通过这样做，你的所有 js 将被编译到一个文件中，根本没有任何模块系统存在
之后做：

  <script src="/dist/tree.js"></script>

并且您编写的所有内容无需任何导入即可随时使用

Gulp concat 输出带有导入语句的文件以及带有相同标识符的导出？

Gulp concat outputs a file with import statements as well as exports with the same identifier?

javascript

typescript

gulp