TypeScript
빌드 도구와 통합
수색…
비고
더 많은 정보를 얻으려면 빌드 도구와 통합 된 공식 웹 페이지 타이프립트를 사용할 수 있습니다.
webpack + loaders 설치 및 구성
설치
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"]); };
세부 정보 : 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-typescript
웹팩
설치
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 에 대한 자세한 내용은 여기를 참조 하십시오 .
대안 :
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
검색 - Hit
Install
- 설치가 완료되면 다시 빌드하십시오!
자세한 내용은 패키지 관리자 대화 상자에서 확인 하고 야간 빌드를 NuGet과 함께 사용하십시오.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow