如何在Gulp中鏈接：使用源代碼地圖將Babylon打印到Webpack？

Question

我試圖創建一個轉換

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

在源映射將回到原來的TS碼一飲而盡任務。

我怎樣才能做到這一點與吞噬？

到目前爲止，我已經成功地把它從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

由於仍然沒有答案，這就是我最終做的。

我不得不做的兩個步驟（從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")); 
 
})