如何使用源映射链接 Gulp：Typescript 到 Babel 到 Webpack？答案

【问题标题】：How to chain in Gulp: Typescript to Babel to Webpack with source map?如何使用源映射链接 Gulp：Typescript 到 Babel 到 Webpack？
【发布时间】：2016-10-28 04:41:13
【问题描述】：

我正在尝试创建一个可以转换的 gulp 任务

TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]

源映射映射回原始 TS 代码的位置。

如何使用 gulp 做到这一点？

到目前为止，我已经设法通过TS -> ES6 -> Babel -> ES5 让它工作

// Build
gulp.task("build", ["clean"], () => {

    const tsProject = ts.createProject("tsconfig.json", {});
    const sourceMapOptions = {
        sourceRoot: __dirname+"/src"
    };

    return tsProject.src()
    .pipe(sourcemaps.init())

        // Typescript
        .pipe(tsProject())
        .js

        // Babel
        .pipe(babel({
            presets: ["es2015"],
            plugins: ["transform-runtime"]
        }))

        // Webpack <-- ????
        .pipe(webpack({})) // <-- ????

    .pipe(sourcemaps.write(".", sourceMapOptions))
    .pipe(gulp.dest("./dist"));

});

但不知道如何添加 webpack。

【问题讨论】：

标签： gulp webpack source-maps gulp-typescript gulp-babel

【解决方案1】：

由于仍然没有答案，这就是我最终要做的。

我必须分两步完成（来自here 的想法）：

Typescript -> (ES6) -> Babel -> (ES5)
Webpack 捆绑
- 使用source-map-loader 获取生成的源地图

/** Typescript -> ES6 -> Babel -> ES5 */
gulp.task("ts-babel", function () {

  const tsconfig = {
    target: "es6",
    lib: ["es5", "dom"]
  }

  const babelconfig = {
    presets: ["es2015"],
    plugins: ["transform-runtime"]
  }
  const tsProject = ts.createProject(tsconfig);

  return gulp
  .src("src/**/*.ts")
  .pipe(sourcemaps.init())
  .pipe(tsProject())
  .js
  .pipe(babel(babelconfig))
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("build/es5"));
})

/** Webpack bundle */
gulp.task("webpack", ["ts-babel"], function () {
  const config = {
    devtool: "source-map",
    output: {
      filename: "app.bundle.js"
    },
    module: {
      preLoaders: [
        {
          test: /\.js$/,
          loader: "source-map-loader"
        }
      ]
    }
  }
  return gulp
  .src("build/es5/**/*.js")
  .pipe(webpack(config))
  .pipe(gulp.dest("build/bundle"));
})

【讨论】：