1
1
---
2
- title : Integrating with Build Tools
2
+ title : 与构建工具集成
3
3
layout : docs
4
4
permalink : /zh/docs/handbook/integrating-with-build-tools.html
5
- oneline : How to use TypeScript with other build tools
5
+ oneline : 如何将 TypeScript 与其他构建工具一起使用
6
6
---
7
7
8
8
## Babel
9
9
10
- ### Install
10
+ ### 安装
11
11
12
12
``` sh
13
13
npm install @babel/cli @babel/core @babel/preset-typescript --save-dev
@@ -21,7 +21,7 @@ npm install @babel/cli @babel/core @babel/preset-typescript --save-dev
21
21
}
22
22
```
23
23
24
- ### Using Command Line Interface
24
+ ### 使用命令行接口
25
25
26
26
``` sh
27
27
./node_modules/.bin/babel --out-file bundle.js src/index.ts
@@ -37,27 +37,27 @@ npm install @babel/cli @babel/core @babel/preset-typescript --save-dev
37
37
}
38
38
```
39
39
40
- ### Execute Babel from the command line
40
+ ### 通过命令行执行 Babel
41
41
42
42
``` sh
43
43
npm run build
44
44
```
45
45
46
46
## Browserify
47
47
48
- ### Install
48
+ ### 安装
49
49
50
50
``` sh
51
51
npm install tsify
52
52
```
53
53
54
- ### Using Command Line Interface
54
+ ### 使用命令行接口
55
55
56
56
``` sh
57
57
browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js
58
58
```
59
59
60
- ### Using API
60
+ ### 使用 API
61
61
62
62
``` js
63
63
var browserify = require (" browserify" );
@@ -70,19 +70,19 @@ browserify()
70
70
.pipe (process .stdout );
71
71
```
72
72
73
- More details: [ smrq/tsify] ( https://github.com/smrq/tsify )
73
+ 更多细节,详见: [ smrq/tsify] ( https://github.com/smrq/tsify )
74
74
75
75
## Grunt
76
76
77
- ### Using ` grunt-ts ` (no longer maintained)
77
+ ### 使用 ` grunt-ts ` (已停止维护)
78
78
79
- #### Install
79
+ #### 安装
80
80
81
81
``` sh
82
82
npm install grunt-ts --save-dev
83
83
```
84
84
85
- #### Basic Gruntfile.js
85
+ #### 基础的 Gruntfile.js
86
86
87
87
``` js
88
88
module .exports = function (grunt ) {
@@ -98,17 +98,17 @@ module.exports = function (grunt) {
98
98
};
99
99
```
100
100
101
- More details: [ TypeStrong/grunt-ts] ( https://github.com/TypeStrong/grunt-ts )
101
+ 更多细节,详见: [ TypeStrong/grunt-ts] ( https://github.com/TypeStrong/grunt-ts )
102
102
103
- ### Using ` grunt-browserify ` combined with ` tsify `
103
+ ### 将 ` grunt-browserify ` 以及 ` tsify ` 组合在一起使用
104
104
105
- #### Install
105
+ #### 安装
106
106
107
107
``` sh
108
108
npm install grunt-browserify tsify --save-dev
109
109
```
110
110
111
- #### Basic Gruntfile.js
111
+ #### 基础的 Gruntfile.js
112
112
113
113
``` js
114
114
module .exports = function (grunt ) {
@@ -128,17 +128,17 @@ module.exports = function (grunt) {
128
128
};
129
129
```
130
130
131
- More details: [ jmreidy/grunt-browserify] ( https://github.com/jmreidy/grunt-browserify ) , [ TypeStrong/tsify] ( https://github.com/TypeStrong/tsify )
131
+ 更多细节,参见: [ jmreidy/grunt-browserify] ( https://github.com/jmreidy/grunt-browserify ) 、 [ TypeStrong/tsify] ( https://github.com/TypeStrong/tsify )
132
132
133
133
## Gulp
134
134
135
- ### Install
135
+ ### 安装
136
136
137
137
``` sh
138
138
npm install gulp-typescript
139
139
```
140
140
141
- ### Basic gulpfile.js
141
+ ### 基础的 gulpfile.js
142
142
143
143
``` js
144
144
var gulp = require (" gulp" );
@@ -155,33 +155,33 @@ gulp.task("default", function () {
155
155
});
156
156
```
157
157
158
- More details: [ ivogabe/gulp-typescript] ( https://github.com/ivogabe/gulp-typescript )
158
+ 更多细节,参见: [ ivogabe/gulp-typescript] ( https://github.com/ivogabe/gulp-typescript )
159
159
160
160
## Jspm
161
161
162
- ### Install
162
+ ### 安装
163
163
164
164
``` sh
165
165
npm install -g jspm@beta
166
166
```
167
167
168
- _ Note: Currently TypeScript support in jspm is in 0.16beta _
168
+ _ 注: 目前, TypeScript 在 jspm 中的 0.16beta 版本中受支持。 _
169
169
170
- More details: [ TypeScriptSamples/jspm] ( https://github.com/Microsoft/TypeScriptSamples/tree/master/jspm )
170
+ 更多细节,参见: [ TypeScriptSamples/jspm] ( https://github.com/Microsoft/TypeScriptSamples/tree/master/jspm )
171
171
172
172
## MSBuild
173
173
174
- Update project file to include locally installed ` Microsoft.TypeScript.Default.props ` (at the top) and ` Microsoft.TypeScript.targets ` (at the bottom) files:
174
+ 更新项目文件以包含本地安装的 ` Microsoft.TypeScript.Default.props ` (位于顶部)和 ` Microsoft.TypeScript.target ` (位于底部)文件:
175
175
176
176
``` xml
177
177
<?xml version =" 1.0" encoding =" utf-8" ?>
178
178
<Project ToolsVersion =" 4.0" DefaultTargets =" Build" xmlns =" http://schemas.microsoft.com/developer/msbuild/2003" >
179
- <!-- Include default props at the top -->
179
+ <!-- 在顶部包含默认属性 -->
180
180
<Import
181
181
Project =" $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
182
182
Condition =" Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
183
183
184
- <!-- TypeScript configurations go here -->
184
+ <!-- TypeScript 配置在这里 -->
185
185
<PropertyGroup Condition =" '$(Configuration)' == 'Debug'" >
186
186
<TypeScriptRemoveComments >false</TypeScriptRemoveComments >
187
187
<TypeScriptSourceMap >true</TypeScriptSourceMap >
@@ -191,37 +191,37 @@ Update project file to include locally installed `Microsoft.TypeScript.Default.p
191
191
<TypeScriptSourceMap >false</TypeScriptSourceMap >
192
192
</PropertyGroup >
193
193
194
- <!-- Include default targets at the bottom -->
194
+ <!-- 默认目标在底部 -->
195
195
<Import
196
196
Project =" $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
197
197
Condition =" Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
198
198
</Project >
199
199
```
200
200
201
- More details about defining MSBuild compiler options: [ Setting Compiler Options in MSBuild projects ] ( /zh /docs/handbook/compiler-options-in-msbuild.html)
201
+ 有关配置 MSBuild 编译器选项的更多详情: [ 在 MSBuild 项目中设置编译器选项 ] ( /docs/handbook/compiler-options-in-msbuild.html )
202
202
203
203
## NuGet
204
204
205
- - Right-Click -> Manage NuGet Packages
206
- - Search for ` Microsoft.TypeScript.MSBuild `
207
- - Hit ` Install `
208
- - When install is complete, rebuild!
205
+ - 右击 -> 管理 NuGet 软件包
206
+ - 搜索 ` Microsoft.TypeScript.MSBuild `
207
+ - 点击 ` Install `
208
+ - 安装完成后,重新构建!
209
209
210
- More details can be found at [ Package Manager Dialog ] ( http://docs.nuget.org/Consume/Package-Manager-Dialog ) and [ using nightly builds with NuGet] ( https://github.com/Microsoft/TypeScript/wiki/Nightly-drops#using-nuget-with-msbuild )
210
+ 更多详情,请参阅 [ 软件包管理器对话框 ] ( http://docs.nuget.org/Consume/Package-Manager-Dialog ) 和 [ 使用 NuGet 进行每日构建 ] ( https://github.com/Microsoft/TypeScript/wiki/Nightly-drops#using-nuget-with-msbuild )
211
211
212
212
## Rollup
213
213
214
- ### Install
214
+ ### 安装
215
215
216
216
```
217
217
npm install @rollup/plugin-typescript --save-dev
218
218
```
219
219
220
- Note that both ` typescript ` and ` tslib ` are peer dependencies of this plugin that need to be installed separately.
220
+ 请注意, ` typescript ` 和 ` tslib ` 都是该插件的对等依赖项,需要单独安装。
221
221
222
- ### Usage
222
+ ### 用法
223
223
224
- Create a ` rollup.config.js ` [ configuration file ] ( https://www.rollupjs.org/guide/en/#configuration-files ) and import the plugin:
224
+ 创建 ` rollup.config.js ` [ 配置文件 ] ( https://www.rollupjs.org/guide/en/#configuration-files ) 并导入插件:
225
225
226
226
``` js
227
227
// rollup.config.js
@@ -237,54 +237,54 @@ export default {
237
237
};
238
238
```
239
239
240
- ## Svelte Compiler
240
+ ## Svelte 编译器
241
241
242
- ### Install
242
+ ### 安装
243
243
244
244
```
245
245
npm install --save-dev svelte-preprocess
246
246
```
247
247
248
- Note that ` typescript ` is an optional peer dependencies of this plugin and needs to be installed separately. ` tslib ` is not provided either.
248
+ 请注意, ` typescript ` 是本插件的可选对等依赖项,需要单独安装。 ` tslib ` 也没有被提供。
249
249
250
- You may also consider [ ` svelte-check ` ] ( https://www.npmjs.com/package/svelte-check ) for CLI type checking.
250
+ 你也可以考虑使用 [ ` svelte-check ` ] ( https://www.npmjs.com/package/svelte-check ) 进行命令行类型检查。
251
251
252
- ### Usage
252
+ ### 用法
253
253
254
- Create a ` svelte.config.js ` configuration file and import the plugin:
254
+ 创建 ` svelte.config.js ` 配置文件并导入插件:
255
255
256
256
``` js
257
257
// svelte.config.js
258
258
import preprocess from ' svelte-preprocess' ;
259
259
260
260
const config = {
261
- // Consult https://github.com/sveltejs/svelte-preprocess
262
- // for more information about preprocessors
261
+ // 查询 https://github.com/sveltejs/svelte-preprocess
262
+ // 获取更多有关预处理器的信息
263
263
preprocess: preprocess ()
264
264
};
265
265
266
266
export default config ;
267
267
```
268
268
269
- You can now specify that script blocks are written in TypeScript:
269
+ 现在,你可以指定使用 TypeScript 编写脚本块:
270
270
271
271
```
272
272
<script lang="ts">
273
273
```
274
274
275
275
## Vite
276
276
277
- Vite supports importing ` .ts ` files out-of-the-box. It only performs transpilation and not type checking. It also requires that some ` compilerOptions ` have certain values. See the [ Vite docs ] ( https://vitejs.dev/guide/features.html#typescript ) for more details.
277
+ Vite 原生支持导入 ` .ts ` 文件。 它只进行转译,不进行类型检查。它还要求某些 ` compilerOptions ` 具有特定的值。详情请参见 [ Vite 文档 ] ( https://vitejs.dev/guide/features.html#typescript ) 。
278
278
279
279
## Webpack
280
280
281
- ### Install
281
+ ### 安装
282
282
283
283
``` sh
284
284
npm install ts-loader --save-dev
285
285
```
286
286
287
- ### Basic webpack.config.js when using Webpack 5 or 4
287
+ ### 使用 Webpack 5 或 4 时的基础 webpack.config.js
288
288
289
289
``` js
290
290
const path = require (' path' );
@@ -310,8 +310,8 @@ module.exports = {
310
310
};
311
311
```
312
312
313
- See [ more details on ts-loader here ] ( https://www.npmjs.com/package/ts-loader ) .
313
+ 此处参见 [ ts-loader 的更多详情 ] ( https://www.npmjs.com/package/ts-loader ) 。
314
314
315
- Alternatives:
315
+ 替代品:
316
316
317
317
- [ awesome-typescript-loader] ( https://www.npmjs.com/package/awesome-typescript-loader )
0 commit comments