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

Question

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

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

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

如何用gulp做到这一点？

到目前为止，我已经设法从TS -> ES6 -> Babel -> ES5工作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到混合。

Answer 1

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

我必须分两步完成（从这里开始 ）：

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