迁移 gulp 进程以包含打字稿

Posted 2023-03-13

【中文标题】迁移 gulp 进程以包含打字稿

【英文标题】：Migrate gulp process to include typescript

【发布时间】：2017-02-18 23:12:11

【问题描述】：

我正在更新 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）上找不到用于此用途的文档。如果有经验的人也致力于这些技术的最新版本，我将不胜感激。

【问题讨论】：

我们在我的组织中经历了完全相同的过程，我们采用了使用 tsc 作为转译器的方法。并且主要使用 gulp 进行其他所有操作，因此对当前升级的影响很小。

谢谢你，@entre，你是如何管理从 JS 到 TS 以及反之亦然的依赖关系的？

from ts2js 没什么可做的，因为 ts 已转换为 js 并且所有依赖项都是托管 angular 的基于字符串的 di，因此对您来说没有任何变化。对于js2ts，你需要定义接口，所以从最核心的部分开始，即依赖最少的模块。所以需要更少的接口定义

我们正在使用 webpack，阅读它比浏览更容易。我确实觉得它们与 grunt 相似，而且我更喜欢 gulp 方法，但是 angular2 正在使用 webpack，所以我们将 tsc 移动到 webpack loader，所以 gulp 剩下的工作就更少了。 must read

它和之前的cmets中提供的链接非常相​​似，ts 2 js + html bunding + css bunding + minification + tslint 都是webpack完成的。 gulp 用于启动服务器（我们将很快将其移至 webpack-dev-server），并运行测试，以及其他 git/publish 任务（一种持续部署）过程

【参考方案1】：

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-scripts-3d6853dd22b8#.a7lwcmpaf

【讨论】：

其实tsc除了将TS编译成JS外，还可以编译遗留的JS文件，解析依赖，输出单个JS bundle；请在此处查看选项--outFile (typescriptlang.org/docs/handbook/compiler-options.html)

你是对的，但我只是想确保区别很明显。 tsc，例如'无法编译 sass 文件。

谢谢你，@fatman，我知道我仍然需要 Gulp 任务来处理sass、html templates 等......不过，我的疑问是关于是否集成 tsc作为我的javascript process 的第一步，或者将此任务替换为typescript process 以处理所有应用程序代码。

你可以让 tsc 做所有的缩小/连接，然后你就不需要一个 js 任务，或者你可以让它把代码转译成 js，让 gulp 做剩下的事情。

这是我的想法@fatman，问题是，只要我知道，使用--outFile 选项需要--module amd 或--module system，我宁愿坚持使用--module commonjs loader 集成在 node 中。

【参考方案2】：

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

【讨论】：

嗨，@Manish，正如我所说，我已经有一个使用 Gulp 的进程，我不想迁移到 Webpack。我对 Yeoman 也有很多问题，所以我也不会尝试。

【参考方案3】：

移动cmets回答：

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

我们用webpack把ts转js，bunding，minification。我们还没有将它用于 html to js string 或 css in js。

关于 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 等等......

【参考方案4】：

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 并投票：)

【参考方案5】：

我相信最简单的方法是使用Zwitterion。您可以阅读this article 进行快速介绍。

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