迁移巨型Typescript应用程序以使用webpack

时间:2017-02-14 22:04:18

标签: javascript typescript webpack

我有一个巨大的Typescript应用程序(~700个文件),它使用gulp基本上连接所有文件,然后编译成ES5。

简化示例:

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('./'))
});

我想开始使用一些Webpack的功能并利用导入的模块化JavaScript,但我找不到一种方法来“迈步”这个过程。一旦使用导入,该文件的代码就不再可用于其余的基于gulp的代码。

这实际上可能不是一个webpack问题。如果我可以放弃将所有文件全部放入一个巨大的文件并开始使用导入,这将是一个巨大的胜利。

无论如何要将这顿饭拼凑在一起,以便我不必一次彻底检修整个应用程序?

1 个答案:

答案 0 :(得分:0)

在我问之后总是想到答案,而且这很简单

  • 创建第二个项目并将一些文件移动到新项目。
  • 给它一个角度模块名称,例如' project.new'
  • 将webpack捆绑为UMD库。
  • 在旧项目的index.html中引用该文件。
  • 添加' project.new'作为旧项目的依赖项:angular.module('project', ['project.new']);
  • 在旧项目中,修改ts_glob以忽略我移动的文件或完全删除它们。

现在您可以一次只移动一个部分或文件。