\nshnpm install @babel/cli @babel/core @babel/preset-typescript --save-dev
\njs{\n \"presets\": [\"@babel/preset-typescript\"]\n}
\nsh./node_modules/.bin/babel --out-file bundle.js src/index.ts
\njs{\n \"scripts\": {\n \"build\": \"babel --out-file bundle.js main.ts\"\n },\n}
\nshnpm run build
\nshnpm install tsify
\nshbrowserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
\njsvar browserify = require(\"browserify\");\nvar tsify = require(\"tsify\");\n\nbrowserify()\n .add(\"main.ts\")\n .plugin(\"tsify\", { noImplicitAny: true })\n .bundle()\n .pipe(process.stdout);
More details: smrq/tsify
\n\nshnpm install duo-typescript
\nshduo --use duo-typescript entry.ts
\njsvar Duo = require(\"duo\");\nvar fs = require(\"fs\");\nvar path = require(\"path\");\nvar typescript = require(\"duo-typescript\");\n\nvar out = path.join(__dirname, \"output.js\");\n\nDuo(__dirname)\n .entry(\"entry.ts\")\n .use(typescript())\n .run(function(err, results) {\n if (err) throw err;\n // Write compiled result to output file\n fs.writeFileSync(out, results.code);\n });
More details: frankwallis/duo-typescript
\n\nshnpm install grunt-ts
\njsmodule.exports = function(grunt) {\n grunt.initConfig({\n ts: {\n default: {\n src: [\"**/*.ts\", \"!node_modules/**/*.ts\"]\n }\n }\n });\n grunt.loadNpmTasks(\"grunt-ts\");\n grunt.registerTask(\"default\", [\"ts\"]);\n};
More details: TypeStrong/grunt-ts
\n\nshnpm install gulp-typescript
\njsvar gulp = require(\"gulp\");\nvar ts = require(\"gulp-typescript\");\n\ngulp.task(\"default\", function() {\n var tsResult = gulp.src(\"src/*.ts\").pipe(\n ts({\n noImplicitAny: true,\n out: \"output.js\"\n })\n );\n return tsResult.js.pipe(gulp.dest(\"built/local\"));\n});
More details: ivogabe/gulp-typescript
\n\nshnpm install -g jspm@beta
Note: Currently TypeScript support in jspm is in 0.16beta
\nMore details: TypeScriptSamples/jspm
\n\nshnpm install ts-loader --save-dev
\njsmodule.exports = {\n entry: \"./src/index.tsx\",\n output: {\n path: \"/\",\n filename: \"bundle.js\"\n },\n resolve: {\n extensions: [\".tsx\", \".ts\", \".js\", \".json\"]\n },\n module: {\n rules: [\n // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'\n { test: /\\.tsx?$/, use: [\"ts-loader\"], exclude: /node_modules/ }\n ]\n }\n};
\njsmodule.exports = {\n entry: \"./src/index.tsx\",\n output: {\n filename: \"bundle.js\"\n },\n resolve: {\n // Add '.ts' and '.tsx' as a resolvable extension.\n extensions: [\"\", \".webpack.js\", \".web.js\", \".ts\", \".tsx\", \".js\"]\n },\n module: {\n rules: [\n // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'\n { test: /\\.tsx?$/, loader: \"ts-loader\" }\n ]\n }\n};
See more details on ts-loader here.
\nAlternatives:
\n\nUpdate project file to include locally installed Microsoft.TypeScript.Default.props (at the top) and Microsoft.TypeScript.targets (at the bottom) files:
\nxml<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<Project ToolsVersion=\"4.0\" DefaultTargets=\"Build\" xmlns=\"http://schemas.microsoft.com/developer/msbuild/2003\">\n <!-- Include default props at the top -->\n <Import\n Project=\"$(MSBuildExtensionsPath32)\\Microsoft\\VisualStudio\\v$(VisualStudioVersion)\\TypeScript\\Microsoft.TypeScript.Default.props\"\n Condition=\"Exists('$(MSBuildExtensionsPath32)\\Microsoft\\VisualStudio\\v$(VisualStudioVersion)\\TypeScript\\Microsoft.TypeScript.Default.props')\" />\n\n <!-- TypeScript configurations go here -->\n <PropertyGroup Condition=\"'$(Configuration)' == 'Debug'\">\n <TypeScriptRemoveComments>false</TypeScriptRemoveComments>\n <TypeScriptSourceMap>true</TypeScriptSourceMap>\n </PropertyGroup>\n <PropertyGroup Condition=\"'$(Configuration)' == 'Release'\">\n <TypeScriptRemoveComments>true</TypeScriptRemoveComments>\n <TypeScriptSourceMap>false</TypeScriptSourceMap>\n </PropertyGroup>\n\n <!-- Include default targets at the bottom -->\n <Import\n Project=\"$(MSBuildExtensionsPath32)\\Microsoft\\VisualStudio\\v$(VisualStudioVersion)\\TypeScript\\Microsoft.TypeScript.targets\"\n Condition=\"Exists('$(MSBuildExtensionsPath32)\\Microsoft\\VisualStudio\\v$(VisualStudioVersion)\\TypeScript\\Microsoft.TypeScript.targets')\" />\n</Project>
More details about defining MSBuild compiler options: Setting Compiler Options in MSBuild projects
\nMicrosoft.TypeScript.MSBuildInstallMore details can be found at Package Manager Dialog and using nightly builds with NuGet
","headings":[{"value":"Babel","depth":1},{"value":"Install","depth":3},{"value":".babelrc","depth":3},{"value":"Using Command Line Interface","depth":3},{"value":"package.json","depth":3},{"value":"Execute Babel from the command line","depth":3},{"value":"Browserify","depth":1},{"value":"Install","depth":3},{"value":"Using Command Line Interface","depth":3},{"value":"Using API","depth":3},{"value":"Duo","depth":1},{"value":"Install","depth":3},{"value":"Using Command Line Interface","depth":3},{"value":"Using API","depth":3},{"value":"Grunt","depth":1},{"value":"Install","depth":3},{"value":"Basic Gruntfile.js","depth":3},{"value":"Gulp","depth":1},{"value":"Install","depth":3},{"value":"Basic gulpfile.js","depth":3},{"value":"Jspm","depth":1},{"value":"Install","depth":3},{"value":"Webpack","depth":1},{"value":"Install","depth":3},{"value":"Basic webpack.config.js when using Webpack 2","depth":3},{"value":"Basic webpack.config.js when using Webpack 1","depth":3},{"value":"MSBuild","depth":1},{"value":"NuGet","depth":1}],"frontmatter":{"permalink":"/docs/handbook/integrating-with-build-tools.html","title":"Integrating with Build Tools"}}},"pageContext":{"slug":"/docs/handbook/integrating-with-build-tools.html","isOldHandbook":true}}}