I'm trying to create a gulp task that transforms
TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]
where the source map maps back to the original TS code.
How can I do this with gulp?
So far, I've managed to get it working from 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"));
});
But have no idea how to add webpack to the mix.
Since there are still no answers, here's what I ended up doing.
I had to do it in two steps (idea from here):
Typescript -> (ES6) -> Babel -> (ES5)
Webpack
to bundle
source-map-loader
to pick up the generated source maps/** 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"));
})