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

【问题标题】：Gulp concat outputs a file with import statements as well as exports with the same identifier?Gulp concat 输出带有导入语句的文件以及具有相同标识符的导出？
【发布时间】：2021-06-26 07:36:21
【问题描述】：

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);
});

源文件的sn-p：

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 删除所有这些 import 语句，因为这些文件仍然是连接的？

【问题讨论】：

标签： javascript typescript gulp

【解决方案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>

而且你写的所有东西都可以在没有任何导入的情况下随时使用

【讨论】：