TypeScript
बिल्ड टूल्स के साथ एकीकरण

टिप्पणियों

वेबपैक + लोडर स्थापित और कॉन्फ़िगर करें

स्थापना

npm install -D webpack typescript ts-loader

webpack.config.js

module.exports = {
  entry: {
    app: ['./src/'],
  },
  output: {
    path: __dirname,
    filename: './dist/[name].js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts(x)$/, loaders: ['ts-loader'], exclude: /node_modules/
    }],
  }
};

Browserify

इंस्टॉल

npm install tsify

कमांड लाइन इंटरफ़ेस का उपयोग करना

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

एपीआई का उपयोग करना

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

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

अधिक जानकारी: smrq / tsify

असंतोष का शब्द

इंस्टॉल

npm install grunt-ts

बेसिक Gruntfile.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

घूंट

इंस्टॉल

npm install gulp-typescript

बेसिक gulpfile.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"));
});

मौजूदा tsconfig.json का उपयोग करके gulpfile.js

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

var tsProject = ts.createProject('tsconfig.json', {
    noImplicitAny: true // You can add and overwrite parameters here
});

gulp.task("default", function () {
    var tsResult = tsProject.src()
        .pipe(tsProject());
    return tsResult.js.pipe(gulp.dest('release'));
});

अधिक जानकारी: ivogabe / gulp-typecript

Webpack

इंस्टॉल

npm install ts-loader --save-dev

बेसिक webpack.config.js

webpack 2.x, 3.x

module.exports = {
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
                test: /\.tsx?$/,
                loaders: ['ts-loader'],
                exclude: /node_modules/
            }
        ]
    },
    entry: [
        // Set index.tsx as application entry point.
        './index.tsx'
    ],
    output: {
      filename: "bundle.js"
    }
};

webpack 1.x

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: /\.ts(x)?$/, loader: "ts-loader", exclude: /node_modules/ }
        ]
    }
}

टीएस-लोडर पर अधिक विवरण यहां देखें ।

विकल्प:

• भयानक-टाइपप्रति-लोडर

MSBuild

प्रोजेक्ट फ़ाइल को स्थानीय रूप से स्थापित Microsoft.TypeScript.Default.props (शीर्ष पर) और Microsoft.TypeScript.targets (निचले तल पर) फ़ाइलों को शामिल करने के लिए अपडेट करें:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <!-- Include default props at the bottom -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

  <!-- TypeScript configurations go here -->
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>

  <!-- Include default targets at the bottom -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>

MSBuild संकलक विकल्पों को परिभाषित करने के बारे में अधिक जानकारी: MSBuild परियोजनाओं में संकलक विकल्प सेट करना

NuGet

• राइट-क्लिक -> NuGet संकुल प्रबंधित करें
• Microsoft.TypeScript.MSBuild लिए खोजें
• हिट Install
• जब इंस्टॉल पूरा हो जाता है, तो पुनर्निर्माण करें!

पैकेज प्रबंधक डायलॉग में अधिक विवरण पाया जा सकता है और रात में नूगेट के साथ बिल्ड का उपयोग किया जा सकता है