7

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

在经历了一次过于复杂的Grunt之后，目前的构建过程很简单，只使用Gulp和Browserify构建两个包：my-lib.js和my-app.js. 这样，比我的应用程序代码更大但更稳定的库不必如此频繁地编译，并且应用程序域代码的编译只需要 0.1 秒。我对此感到高兴——以及其他开发人员。

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

Typescript 和 Gulp 都发展得非常快，我在他们的文档 ( 1 , 2 )上找不到用于此用途的文档。我会很感激有经验的人的反馈，他们也在研究这些技术的最新版本。

4

5 回答 5

7

移动评论回答：

我们在我的组织中进行了非常类似的练习，接近尾声。我们大部分的东西都使用了 webpack，虽然 webpack 感觉有点 grunt'y 并且在 gulp 之后，我不是 grunt 的忠实粉丝。

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

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

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

此外，gulp 比 ts 到 js 大得多，我们仍在使用它来创建部署包，将 js 注入 html，修复 boostrap 字体路径，将小图像转换为 base64 等等......

于 2016-10-15T04:44:53.327 回答
3

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

另一方面，gulp是一个构建工具，这意味着它可以运行各种任务，包括编译 typescript、sass、缩小、连接等。

您可以在此处查看有关如何使用 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-脚本-3d6853dd22b8#.a7lwcmpaf

于 2016-10-10T13:56:38.803 回答
1

我相信最简单的方法是使用Zwitterion。您可以阅读这篇文章以获得快速介绍。

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

于 2017-08-01T04:53:31.633 回答
0 
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并投票 :)

于 2017-02-13T22:17:41.103 回答
0

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

于 2016-10-10T14:36:13.343 回答