From 5537e50585c001f75ea3489ebe168f799ee0bee7 Mon Sep 17 00:00:00 2001 From: zhongsp Date: Sat, 12 Dec 2015 09:57:37 +0800 Subject: [PATCH] Add new topic: Integrating with Build Tools --- README.md | 1 + SUMMARY.md | 3 +- doc/handbook/Integrating with Build Tools.md | 163 +++++++++++++++++++ preface.md | 2 + 4 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 doc/handbook/Integrating with Build Tools.md diff --git a/README.md b/README.md index 6b9b37f..31336df 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ TypeScript is a superset of JavaScript that compiles to clean JavaScript output. * [tsconfig.json](./doc/handbook/tsconfig.json.md) * [编译选项](./doc/handbook/Compiler Options.md) * [在MSBuild里使用编译选项](./doc/handbook/Compiler Options in MSBuild.md) +* [与其它构建工具整合](./doc/handbook/Integrating with Build Tools.md) **TypeScript Handbook** diff --git a/SUMMARY.md b/SUMMARY.md index 2dbb5c8..937cdd4 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -21,4 +21,5 @@ * [Decorators](./doc/handbook/Decorators.md) * [tsconfig.json](./doc/handbook/tsconfig.json.md) * [编译选项](./doc/handbook/Compiler Options.md) -* [在MSBuild里使用编译选项](./doc/handbook/Compiler Options in MSBuild.md) \ No newline at end of file +* [在MSBuild里使用编译选项](./doc/handbook/Compiler Options in MSBuild.md) +* [与其它构建工具整合](./doc/handbook/Integrating with Build Tools.md) \ No newline at end of file diff --git a/doc/handbook/Integrating with Build Tools.md b/doc/handbook/Integrating with Build Tools.md new file mode 100644 index 0000000..135916f --- /dev/null +++ b/doc/handbook/Integrating with Build Tools.md @@ -0,0 +1,163 @@ +# Browserify + +### 安装 + +```sh +npm install tsify +``` + +### 使用命令行交互 + +```sh +browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js +``` + +### 使用API + +```js +var browserify = require("browserify"); +var tsify = require("tsify"); + +browserify() + .add('main.ts') + .plugin('tsify', { noImplicitAny: true }) + .bundle() + .pipe(process.stdout); +``` + +更多详细信息:[smrq/tsify](https://github.com/smrq/tsify) + +# Duo + +### 安装 + +```sh +npm install duo-typescript +``` + +### 使用命令行交互 + +```sh +duo --use duo-typescript entry.ts +``` + +### 使用API + +```js +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); + }); +``` + +更多详细信息:[frankwallis/duo-typescript](https://github.com/frankwallis/duo-typescript) + +# Grunt + +### 安装 + +```sh +npm install grunt-ts +``` + +### 基本Gruntfile.js + +````js +module.exports = function(grunt) { + grunt.initConfig({ + ts: { + default : { + src: ["**/*.ts", "!node_modules/**/*.ts"] + } + } + }); + grunt.loadNpmTasks("grunt-ts"); + grunt.registerTask("default", ["ts"]); +}; +```` + +更多详细信息:[TypeStrong/grunt-ts](https://github.com/TypeStrong/grunt-ts) + +# gulp + +### 安装 + +```sh +npm install gulp-typescript +``` + +### 基本gulpfile.js + +```js +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')); +}); +``` + +更多详细信息:[ivogabe/gulp-typescript](https://github.com/ivogabe/gulp-typescript) + +# jspm + +### 安装 + +```sh +npm install -g jspm@beta +``` + +_注意:目前jspm的0.16beta版本支持TypeScript_ + +更多详细信息:[TypeScriptSamples/jspm](https://github.com/Microsoft/TypeScriptSamples/tree/jspm/jspm) + +# webpack + +### 安装 + +```sh +npm install awesome-typescript-loader --save-dev +``` + +### 基本webpack.config.js + +```js +module.exports = { + + // Currently we need to add '.ts' to resolve.extensions array. + resolve: { + extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'] + }, + + // Source maps support (or 'inline-source-map' also works) + devtool: 'source-map', + + // Add loader for .ts files. + module: { + loaders: [ + { + test: /\.ts$/, + loader: 'awesome-typescript-loader' + } + ] + } +}; +``` + +更多详细信息:[s-panferov/awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader) \ No newline at end of file diff --git a/preface.md b/preface.md index 56d67bc..9893089 100644 --- a/preface.md +++ b/preface.md @@ -43,10 +43,12 @@ TypeScript目前还在积极的开发完善之中,不断地会有新的特性 * [tsconfig.json](./doc/handbook/tsconfig.json.md) * [编译选项](/doc/handbook/Complier Options.md) * [在MSBuild里使用编译选项](./doc/handbook/Compiler Options in MSBuild.md) +* [与其它构建工具整合](./doc/handbook/Integrating with Build Tools.md) ## 主要修改 +* 2015-12-12 新增章节:[与其它构建工具整合](./doc/handbook/Integrating with Build Tools.md) * 2015-12-12 新增章节:[在MSBuild里使用编译选项](./doc/handbook/Compiler Options in MSBuild.md) * 2015-12-11 新增章节:[高级类型](./doc/handbook/Advanced Types.md) * 2015-12-06 新增章节:[编译选项](./doc/handbook/Complier Options.md)