TypeScript项目构建工具合集 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript编译环境和tsconfig.json文件

构建工具是一种编程工具，它可以帮助将源代码的转换和打包自动化到一个文件中。构建工具实用程序用于构建程序的新版本。构建意味着编译、链接并将代码打包成可执行的形式。

构建工具通常在命令行上运行，或者在IDE中运行，或者完全独立于IDE。

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

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

使用构建工具

在小型项目中，软件开发人员手动调用构建过程，这对于大型项目来说不是一个好的实践。这是因为，在大型项目中，很难跟踪需要构建什么、以什么顺序构建以及构建过程中的依赖关系。因此我们使用自动化工具，使构建过程更加一致。

可以与TypeScript集成的一些标准构建工具有:

• Browserify
• Duo
• Grunt
• Gulp
• Jspm
• Webpack

1. Browserify

使用Browserify plugin Tsify编译TypeScript文件。

安装

使用以下命令安装Tsify:

$npm install Tsify  

使用命令行接口

通过使用以下命令，编译将结果保存在名为bundl .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

安装

使用以下命令安装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;  
        // 将编译后的结果写入输出文件  
        fs.writeFileSync(out, results.code);  
    });  

3. Grunt

使用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

使用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 plugin编译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" }  
        ]  
    }  
}