打字稿构建工具 - 芒果文档

📌 相关文章

📜 打字稿构建工具

📅 最后修改于: 2021-01-11 12:57:41 🧑 作者: Mango

TypeScript构建工具

构建工具是编程实用工具，帮助进行自动化改造和我们的源代码捆绑成一个单一的文件。生成工具实用程序用于生成程序的新版本。构建是指将代码编译，链接和打包为可执行形式。

Build工具通常在IDE中或与其完全独立的命令行上运行。

构建工具或构建自动化是脚本化或自动化开发人员在日常活动中执行的各种任务的行为。这些是：

下载依赖项。
将源代码编译为二进制代码。
打包该二进制代码。
运行测试。
部署到生产系统。

使用构建工具

在小型项目中，软件开发人员手动调用构建过程，这对于大型项目而言不是一个好习惯。这是因为在大型项目中，很难跟踪需要构建的内容，构建过程中的依序和依存关系。因此，我们使用了自动化工具，该工具可使构建过程更加一致。

可以与TypeScript集成的一些标准构建工具是：

浏览器
o
咕unt声
古尔普
pm
Webpack

1. Browserify

使用Browserify插件Tsify编译TypeScript文件。

安装

使用以下命令安装Tsify：

$npm install Tsify

使用命令行界面

通过使用以下命令，编译将结果保存到名为bundle.js的文件中的代码。

browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

使用API

var browserify = require("browserify");
var tsify = require("tsify");

browserify()
    .add("main.ts")
    .plugin("tsify", { noImplicitAny: true })
    .bundle()
    .pipe(process.stdout);

2.二重奏

安装

使用以下命令安装Duo插件：

$npm install duo-typescript

使用命令行界面

通过使用以下命令，编译将结果保存到名为entry.ts的文件中的代码。

$duo --use duo-typescript entry.ts

使用API

var Duo = require("duo");
var fs = require("fs")
var path = require("path")
var typescript = require("duo-typescript");

var out = path.join(__dirname, "output.js")

Duo(__dirname)
    .entry("entry.ts")
    .use(typescript())
    .run(function (err, results) {
        if (err) throw err;
        // Write compiled result to output file
        fs.writeFileSync(out, results.code);
    });

3.咕Gr

使用Grunt提供的grunt-ts插件来编译TypeScript文件。

安装

使用以下命令安装grunt-ts：

$npm install grunt-ts

现在，您需要在项目中包含名为gruntfile.js的Grunt配置文件。

module.exports = function(grunt) {
    grunt.initConfig({
        ts: {
            default: {
                src: ["**/*.ts", "!node_modules/**/*.ts"]
            }
        }
    });
    grunt.loadNpmTasks("grunt-ts");
    grunt.registerTask("default", ["ts"]);
};

4.大口吃

使用gulp-typescript插件编译TypeScript文件。

安装

使用以下命令安装gulp-typescript：

$npm install gulp-typescript

现在，您需要在项目中包含名为gulpfile.js的Gulp配置文件。

var gulp = require("gulp");
var ts = require("gulp-typescript");

gulp.task("default", function () {
    var tsResult = gulp.src("src/*.ts")
        .pipe(ts({
              noImplicitAny: true,
              out: "output.js"
        }));
    return tsResult.js.pipe(gulp.dest("built/local"));
});

5. Jspm

使用jspm插件编译TypeScript文件。

安装

使用以下命令安装jspm：

$npm install -g jspm@beta

注意：目前jspm中的TypeScript支持在0.16beta中

6. Webpack

使用ts-loader插件来编译TypeScript文件。

安装

使用以下命令安装webpack：

$npm install ts-loader --save-dev

现在，您需要在项目中包含名为webpack.config.js的Webpack配置文件。

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js"
    },
    resolve: {
        // Add '.ts' and '.tsx' as a resolvable extension.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
}