TypeScript
Integrering med Build Tools
Sök…
Anmärkningar
För mer information kan du gå till officiella webbsidoskript som integreras med byggverktyg
Installera och konfigurera webpack + lastare
Installation
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
Installera
npm install tsify
Använda kommandoradsgränssnittet
browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
Använda API
var browserify = require("browserify");
var tsify = require("tsify");
browserify()
.add("main.ts")
.plugin("tsify", { noImplicitAny: true })
.bundle()
.pipe(process.stdout);
Mer information: smrq / tsify
Grymta
Installera
npm install grunt-ts
Grundläggande Gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ ts: { default : { src: ["**/*.ts", "!node_modules/**/*.ts"] } } }); grunt.loadNpmTasks("grunt-ts"); grunt.registerTask("default", ["ts"]); };
Mer information: TypeStrong / gunt-ts
Klunk
Installera
npm install gulp-typescript
Grundläggande 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")); });
gulpfile.js med en befintlig tsconfig.json
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')); });
Mer information: ivogabe / gulp-typskrift
Webpack
Installera
npm install ts-loader --save-dev
Grundläggande 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/ } ] } }
Se mer information om ts-loader här .
alternativ:
MSBuild
Uppdatera projektfilen så att den inkluderar lokalt installerade Microsoft.TypeScript.Default.props
(längst upp) och Microsoft.TypeScript.targets
(längst ner):
<?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>
Mer information om hur du definierar MSBuild-kompilatoralternativ: Ställa in kompilatoralternativ i MSBuild-projekt
NuGet
- Högerklicka -> Hantera NuGet-paket
- Sök efter
Microsoft.TypeScript.MSBuild
- Hit
Install
- När installationen är klar, bygga om!
Mer information finns i Package Manager Dialog och använder nattliga byggningar med NuGet
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow