عرض مصدر TypeScript/integrating with build tools

<noinclude>{{DISPLAYTITLE:استعمال أدوات البناء مع TypeScript}}</noinclude>
توضّح هذه الصفحة كيفيّة استخدام أدوات البناء (Build tools) المشهورة مع شيفرة TypeScript:
==Browserify==
===التثبيت===
<syntaxhighlight lang="typescript">
npm install tsify
</syntaxhighlight>
===باستخدام واجهة سطر الأوامر (Command Line Interface)===
<syntaxhighlight lang="typescript">
browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
</syntaxhighlight>
===باستخدام الواجهة البرمجية (API)===
<syntaxhighlight lang="typescript">
var browserify = require("browserify");
var tsify = require("tsify");

browserify()
    .add("main.ts")
    .plugin("tsify", { noImplicitAny: true })
    .bundle()
    .pipe(process.stdout);
</syntaxhighlight>
للمزيد من التفاصيل، انظر: [https://github.com/smrq/tsify smrq/tsify]

==Duo==
===التثبيت===
<syntaxhighlight lang="typescript">
npm install duo-typescript
</syntaxhighlight>
===باستخدام واجهة سطر الأوامر (Command Line Interface)===
<syntaxhighlight lang="typescript">
duo --use duo-typescript entry.ts
</syntaxhighlight>
===باستخدام الواجهة البرمجية (API)===
<syntaxhighlight lang="typescript">
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);
    });
</syntaxhighlight>
للمزيد من التفاصيل، انظر: [https://github.com/frankwallis/duo-typescript frankwallis/duo-typescript]

==Grunt==
===التثبيت===
<syntaxhighlight lang="typescript">
npm install grunt-ts
</syntaxhighlight>
===ملفّ ‎<code>Gruntfile.js</code>‎ بسيط===
<syntaxhighlight lang="typescript">
module.exports = function(grunt) {
    grunt.initConfig({
        ts: {
            default : {
                src: ["**/*.ts", "!node_modules/**/*.ts"]
            }
        }
    });
    grunt.loadNpmTasks("grunt-ts");
    grunt.registerTask("default", ["ts"]);
};
</syntaxhighlight>
للمزيد من التفاصيل، انظر: [https://github.com/TypeStrong/grunt-ts TypeStrong/grunt-ts]

==Gulp==
===التثبيت===
<syntaxhighlight lang="typescript">
npm install gulp-typescript
</syntaxhighlight>
===ملفّ ‎<code>gulpfile.js</code>‎ بسيط===
<syntaxhighlight lang="typescript">
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"));
});
</syntaxhighlight>
للمزيد من التفاصيل، انظر: [https://github.com/ivogabe/gulp-typescript ivogabe/gulp-typescript]

==Jspm==
===التثبيت===
<syntaxhighlight lang="typescript">
npm install -g jspm@beta
</syntaxhighlight>
ملاحظة: دعم TypeScript في jspm حاليا في مرحلة 0.16beta.

للمزيد من التفاصيل، انظر: [https://github.com/TypeScriptSamples/jspm TypeScriptSamples/jspm]

==Webpack==
===التثبيت===
<syntaxhighlight lang="typescript">
npm install ts-loader --save-dev
</syntaxhighlight>
===ملفّ ‎<code>webpack.config.js</code>‎ بسيط===
<syntaxhighlight lang="typescript">
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js"
    },
    resolve: {
        // إضافة
        // '.ts' و '.tsx'
        // كامتدادين قابلين للتقرير
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // ستُعالَج جميع الملفات ذات الامتداد
            // '.ts' أو '.tsx'
            // باستعمال
            // 'ts-loader'
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
}
</syntaxhighlight>
انظر [https://www.npmjs.com/package/ts-loader هذه الصفحة] للاستزادة.

المحمِّلُ [https://www.npmjs.com/package/awesome-typescript-loader awesome-typescript-loader] بديلٌ للمحمِّل ts-loader.

==MSBuild==
عدِّل ملف المشروع ليشمل خاصيّات ‎<code>Microsoft.TypeScript.Default.props</code>‎ (في الأعلى) المُثبَّتة محليًّا، وملفّات ‎<code>Microsoft.TypeScript.targets</code>‎ (في الأسفل):
<syntaxhighlight lang="typescript">
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <!-- ضمِّن الخاصيات الافتراضية في الأعلى -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

  <!-- ضع إعدادات تايبسكربت هنا-->
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>

  <!-- ضمِّن الأهداف الافتراضية في الأسفل -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>
</syntaxhighlight>
يمكنك معرفة المزيد حول تعريف خيارات المترجم في MSBuild من هذه الصفحة.

==NuGet==
* اضغط زر الفأرة الأيمن، ثمّ ‎<code>Manage NuGet Packages</code>‎.
* ابحث عن ‎<code>Microsoft.TypeScript.MSBuild</code>‎.
* اضغط على ‎<code>Install</code>‎ للتثبيت.
* عند انتهاء التثبيت، أعد بناء المشروع.

للاستزادة، انظر [http://docs.nuget.org/Consume/Package-Manager-Dialog هذه الصفحة]، واقرأ [https://github.com/Microsoft/TypeScript/wiki/Nightly-drops#using-nuget-with-msbuild هذه الفقرة] لمعرفة كيفية استعمال البناءات الليليّة (nightly builds) مع NuGet.

== مصادر ==
* [http://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html#duo صفحة Integrating with Build Tools في توثيق TypeScript الرسمي.]
[[تصنيف:TypeScript]]