Question

我正在更新Angular 1.5.8应用程序的构建过程，以允许在Typescript上进行开发。

在使用Grunt过度复杂的体验之后，当前的构建过程很简单，只使用Gulp和Browserify来构建两个包：my-lib.js和{{1 }}。这样，库比我的应用程序代码更大但更稳定，不需要经常编译，应用程序域代码的编译只需要0.1秒。我很满意 - 以及其他开发者。

现在我们期待迁移到Angular 2.0并希望在Typescript中开始开发，但我不确定如何将其集成到构建过程中，甚至是如何将其集成到最佳方法：是否应该首选使用my-app.js将Typescript编译为Javascript并让Browserify处理依赖项？或者我应该使用tsc作为我的主要构建工具，让它解决依赖关系，创建映射文件并制作捆绑包？

Typescript和Gulp都在快速发展，我在他们的文档中找不到这种用法的文档（1，2）。我很感激有经验的人员提供反馈，他们也在研究这些技术的最新版本。

Answer 1

移动评论以回答：

我们在我的组织中进行了非常类似的练习，直到最后。我们已经使用了webpack来处理大部分内容，虽然webpack感觉很少grunt'y并且在gulp之后，我不是grunt的忠实粉丝。

我们使用webpack将ts转换为js，bunding，minification。我们还没有将它用于js中的html到js字符串或css。

关于di部分，您只需要担心js to ts。 ts to js不是问题，因为它是由angular的基于字符串的di处理的。关于ts to ts，您需要定义所需的接口。这些将帮助您将来移动js to ts。最好从具有最少依赖性的核心组件开始。

修改只是回答有关gulp优势的部分：特别是在迁移场景中，升级不会一次性发生，因此移动到TS的任何内容都应由tsc处理并保留为gulp。

另外gulp比ts更大，我们仍然用它来创建部署包，将js注入html，修复boostrap字体路径，将小图像转换为base64等等。

Answer 2

tsc 有一个目的：转换（编译）打字稿文件。

另一方面，

gulp 是一个构建工具，这意味着它可以运行各种任务，包括编译打字稿，sass，minification，concatenation等。

您可以在此处查看有关如何使用gulp合并typescript和browserify的示例：https://www.typescriptlang.org/docs/handbook/gulp.html

另一种方法，根本不是使用gulp，而是使用npm脚本，你可以在这里看到一个示例：https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.a7lwcmpaf

Answer 3

我认为最简单的方法是使用Zwitterion。您可以阅读this article以获得快速介绍。

Zwitterion允许您通过普通脚本标记将TypeScript直接包含在浏览器中。 TypeScript的所有功能都是自动可用的，因为代码在服务器端被提供给客户端时逐个文件地进行转换。在引擎盖下，它使用SystemJS来模拟所有浏览器中标准的真实ES模块加载器行为。如果您需要在生产中使用它，可以使用Zwitterion创建静态构建。所有这些避免捆绑，所以你必须决定你的性能需求。就个人而言，我认为性能不是HTTP2的一个大问题，我更喜欢最简单的构建，而不是webpack及其所有朋友带来的复杂性。

Answer 4

当你正在使用打字稿时，我的建议是集成任何模块捆绑器，例如webpack（我最喜欢的）在内部，它将使用ts加载器来转换代码。与编译一起，您将能够使用ts lint进行静态代码分析（webpack会处理它）。如果您想创建多个模块，Webpack也会有所帮助。试试yomen https://github.com/FountainJS/generator-fountain-webapp。搭建脚手架后，您可以参考生成的gulp文件。它会让你了解打字稿集成。

Answer 5

The best way to do this without overengineering your gulp setup is to use the plain typescript compiler:

1. Install typescript locally(it won't conflict with your global tsc):
    npm i typescript --save-dev

2. Add tsc as npm script(inside package.json).
    "scripts": {
        "tsc": "tsc"
    }

3. Create proper tsconfig.json for your needs and put it in the same folder as package.json
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

4. Use tsc compiler directly from gulp
    var child_process = require("child_process");

    gulp.task("build", function(cb) {
        var tsc = child_process.spawn("npm", ["-s", "run", "tsc"], {stdio: "inherit", cwd: __dirname});
        tsc.on("close", function(code) {
            console.log("Tsc finished with code", code);
            cb();
        });
    });

提示。使用https://www.npmjs.com/package/gulp-sequence并投票：）

迁移gulp进程以包含typescript

5 个答案: