TypeScript
ビルドツールとの統合
サーチ…
備考
詳細については、ビルドツールと統合した公式のWebページのタイスクリプト
webpack +ローダーのインストールと設定
インストール
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/
}],
}
};
ブラウジング
インストール
npm install tsify
コマンドラインインターフェイスの使用
browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
APIの使用
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"]); };
ギャルプ
インストール
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')); });
ウェブパック
インストール
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/ } ] } }
ts-loaderの詳細はこちらをご覧ください 。
代替案:
MSビルド
ローカルにインストールされた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
- インストールが完了したら、再構築してください!
詳細はPackage Managerダイアログで確認できます。NuGetで夜間ビルドを使用する
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow