TypeScript
Integracja z narzędziami do budowania
Szukaj…
Uwagi
Aby uzyskać więcej informacji, możesz przejść na oficjalny skrypt strony zintegrowany z narzędziami do kompilacji
Zainstaluj i skonfiguruj webpack + moduły ładujące
Instalacja
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
zainstalować
npm install tsify
Korzystanie z interfejsu wiersza poleceń
browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
Korzystanie z interfejsu API
var browserify = require("browserify");
var tsify = require("tsify");
browserify()
.add("main.ts")
.plugin("tsify", { noImplicitAny: true })
.bundle()
.pipe(process.stdout);
Więcej informacji: smrq / tsify
Chrząknięcie
zainstalować
npm install grunt-ts
Basic Gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ ts: { default : { src: ["**/*.ts", "!node_modules/**/*.ts"] } } }); grunt.loadNpmTasks("grunt-ts"); grunt.registerTask("default", ["ts"]); };
Więcej informacji: TypeStrong / grunt-ts
Łyk
zainstalować
npm install gulp-typescript
Podstawowe 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 przy użyciu istniejącego pliku 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')); });
Więcej informacji: ivogabe / gulp-typescript
Webpack
zainstalować
npm install ts-loader --save-dev
Podstawowy 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/ } ] } }
Zobacz więcej szczegółów na temat ts-loader tutaj .
Alternatywy:
MSBuild
Zaktualizuj plik projektu, aby uwzględnić lokalnie zainstalowane pliki Microsoft.TypeScript.Default.props
(u góry) i Microsoft.TypeScript.targets
(u dołu):
<?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>
Więcej szczegółów na temat definiowania opcji kompilatora MSBuild: Ustawianie opcji kompilatora w projektach MSBuild
NuGet
- Kliknij prawym przyciskiem myszy -> Zarządzaj pakietami NuGet
- Wyszukaj
Microsoft.TypeScript.MSBuild
- Kliknij
Install
- Po zakończeniu instalacji przebuduj!
Więcej informacji można znaleźć w oknie Menedżera pakietów i przy użyciu nocnych kompilacji z NuGet
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow