TypeScript
Интеграция с инструментами построения
Поиск…
замечания
Для получения дополнительной информации вы можете перейти на официальную веб-страницу, в которой встроен скрипт со встроенными инструментами
Установите и настройте загрузчики 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/
}],
}
};
Browserify
устанавливать
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")); });
gulpfile.js с использованием существующего 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')); });
Подробнее: ivogabe / gulp-typescript
Webpack
устанавливать
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
-
Install
удар - Когда установка завершена, перестройте!
Более подробную информацию можно найти в диалоговом окне диспетчера пакетов и использовать ночные сборки с помощью NuGet
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow