迁移大型Typescript应用程序以使用Webpack

Question

I have a giant Typescript application (~700 files) that uses gulp to basically concat all the files then compile into ES5.

Simplified example:

gulp.task(
'ts',
function () {
    var tsResult = gulp.src(ts_glob, { base: './js' })
        .pipe(sourcemaps.init())
        .pipe(tsProject());

    return tsResult.js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./'))
});

I want to start using some of Webpack's functionality and take advantage of modular javascript using import, but I can't find a way to "baby step" this process. As soon as use import that file's code is no longer available to the rest of the gulp based code.

This may not even be a webpack problem really. If I could just get away from globbing all the files into one giant file and start using import that would be a huge win.

Is there anyway to piece meal this together so that I don't have to overhaul the whole app at one time?

Answer 1

Always think of the answer after I ask, and it's so simple

• Create a second project and move some files to the new project.
• Give it an angular module name like 'project.new'
• Bundled that up with webpack as a UMD library.
• Reference that file in index.html of the old project.
• Add 'project.new' as a dependency in the old project ex: angular.module('project', ['project.new']);
• In old project either modify ts_glob to ignore the files I've moved or just delete them altogether.

Now you can just move one section or file at a time.