【TypeScript系列】与其它构建工具整合

与其它构建工具整合

构建工具

  • Babel
  • Browserify
  • Duo
  • Grunt
  • Gulp
  • Jspm
  • Webpack
  • MSBuild
  • NuGet

Babel

安装

npm install @babel/cli @babel/core @babel/preset-typescript --save-dev

.babelrc

{"presets": ["@babel/preset-typescript"]
}

使用命令行工具

./node_modules/.bin/babel --out-file bundle.js src/index.ts

package.json

{"scripts": {"build": "babel --out-file bundle.js main.ts"},
}

在命令行上运行Babel

npm run build

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

Duo

安装

npm install duo-typescript

使用命令行交互

duo --use duo-typescript entry.ts

使用API

var Duo = require('duo');
var fs = require('fs')
var path = require('path')
var typescript = require('duo-typescript');var out = path.join(__dirname, "output.js")Duo(__dirname).entry('entry.ts').use(typescript()).run(function (err, results) {if (err) throw err;// Write compiled result to output filefs.writeFileSync(out, results.code);});

更多详细信息:frankwallis/duo-typescript

Grunt

安装

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

Gulp

安装

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'));
});

更多详细信息:ivogabe/gulp-typescript

Jspm

安装

npm install -g jspm@beta

注意:目前jspm的0.16beta版本支持TypeScript

更多详细信息:TypeScriptSamples/jspm

Webpack

安装

npm install ts-loader --save-dev

Webpack 2 webpack.config.js 基础配置

module.exports = {entry: "./src/index.tsx",output: {path: '/',filename: "bundle.js"},resolve: {extensions: [".tsx", ".ts", ".js", ".json"]},module: {rules: [// all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'{ test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ }]}
}

Webpack 1 webpack.config.js 基础配置

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: /\.tsx?$/, loader: "ts-loader" }]}
};

查看更多关于ts-loader的详细信息

或者

  • awesome-typescript-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 top --><ImportProject="$(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 --><ImportProject="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>

关于配置MSBuild编译器选项的更多详细信息,请参考:在MSBuild里使用编译选项

NuGet

  • 右键点击 -> Manage NuGet Packages
  • 查找Microsoft.TypeScript.MSBuild
  • 点击Install
  • 安装完成后,Rebuild。

更多详细信息请参考Package Manager Dialog和using nightly builds with NuGet

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/788482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P1002 过河卒:图论动态规划入门

本题链接&#xff1a;P1002 [NOIP2002 普及组] 过河卒 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a; 本题与之前的动态规划不一样&#xff0c;比如背包问题和子序列问题等都是线性dp&#xff0c;也就是dp数组其实主要用于存储计算的结果&#xff0c;而这题…

面试算法6/400-和至少为 K 的最短子数组

题目 给你一个整数数组 nums 和一个整数 k &#xff0c;找出 nums 中和至少为 k 的 最短非空子数组 &#xff0c;并返回该子数组的长度。如果不存在这样的 子数组 &#xff0c;返回 -1 。 子数组 是数组中 连续 的一部分。 示例 1&#xff1a; 输入&#xff1a;nums [1], …

vue 基础回顾

vue 基础回顾 一、重要文件 node_modules&#xff1a;当前项目依赖的 js 包assets&#xff1a;静态资源存放目录(图片)components&#xff1a;公共组件存放目录App.vue&#xff1a;主组件&#xff0c;页面的入口文件main.js&#xff1a;整个项目入口文件package.json&#xf…

LabVIEW专栏二、调用子VI

该节目标是创建带子vi&#xff0c;修改vi属性&#xff0c;测试可重入和不可重入的区别 一 、设置子VI 把VI封装成为子VI&#xff0c;可以帮助模块化程序&#xff0c;简化代码结构。 任何VI本身都可以成为别的VI的子VI。 1.1、设置输入输出端子 1、在前面板空白处&#xff0…

Matlab|基于关键场景辨别算法的两阶段鲁棒微网优化调度

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该模型主要求解的是微网两阶段鲁棒优化调度问题&#xff0c;与目前大部分用CCG算法不同&#xff0c;模型创新性的采用关键场景辨别法&#xff0c;通过少量的迭代辨别出最恶劣的场景&#xff0c;针对光伏出力的…

obs直播推流 + ffmpeg参数

OBS 启动参数设为 --startstreaming &#xff0c; 可以让它启动后自动开始直播 对应ffmpeg参数&#xff1a; echo off :loop ffmpeg -re -i a.mp4 -r 24 -c:v libx264 -preset ultrafast -profile:v baseline -g 24 -keyint_min 24 -x264-params nal-hrdcbr -b:v 2500k -minr…

mybatis批量新增数据

数据量大的时候如果在循环中执行单条新增操作&#xff0c;是非常慢的。那么如何在mybatis中实现批量新增数据呢&#xff1f; 方法 insert 标签的 foreach 属性可以用于批量插入数据。您可以使用 foreach 属性遍历一个集合&#xff0c;并为集合中的每个元素生成一条插入语句。…

洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

题目 打印超级玛丽字符图像 小技巧 直接复制题目的超级玛丽符号首行会有空格问题&#xff0c;一直AC不过&#xff0c;一行一行地复制就OK了&#x1f44c;。 Rust 题解 fn main() {println!(" ********************####....#.#..###.....##....###...…

pip和conda 设置安装源

pip和conda 设置安装源 conda查看 channels添加 channels移除 channelschannels 配置文件 pip查看 index-url添加 index-url移除 index-urlindex-url 配置文件 常用源 conda 查看 channels conda config --show channels添加 channels conda config --add channels https:/…

企业周年庆3d云展厅促进了客企间交流与互动

在数字化浪潮席卷而来的今天&#xff0c;传统的展示方式已难以满足现代人对信息获取与体验的高标准需求。为此&#xff0c;一种革命性的展示方式——线上3D虚拟展厅应运而生&#xff0c;以其独特的魅力逐渐引领展示方式的革新。 线上3D虚拟展厅开发&#xff0c;不仅为参与者带来…

JVM垃圾收集——相关概念

本贴讲解的内容包括System.gc()、内存溢出、内存泄漏、STW机制以及垃圾收集的串行、并行、并发三种情况&#xff0c;还有强引用、软引用、弱引用、虚引用四种引用。 1、System.gc()的理解 在默认情况下&#xff0c;通过System.gc()或者Runtime.getRuntime().gc()的调用&#…

k8s 加 jenkins 和 gitlab 结合 maven生成快速devops平台内网快速部署

要实现Docker、Jenkins和GitLab的结合&#xff0c;以及通过Maven生成快速DevOps平台内网快速部署&#xff0c;可以按照以下步骤进行操作&#xff1a; 安装Docker&#xff1a;首先需要在服务器上安装Docker&#xff0c;可以根据操作系统的不同&#xff0c;参考Docker官方文档进行…

提升常州小程序软件开发的搜索排名:关键步骤解析

在移动互联网的浪潮中&#xff0c;小程序作为连接用户与服务的桥梁&#xff0c;其重要性日益凸显。对于常州的小程序软件开发企业来说&#xff0c;如何让自己的产品在浩如烟海的互联网信息中脱颖而出&#xff0c;提升搜索排名&#xff0c;成为了亟待解决的问题。本文将为您解析…

HarmonyOS 应用开发之自定义组件冻结功能

自定义组件处于非激活状态时&#xff0c;状态变量将不响应更新&#xff0c;即Watch不会调用&#xff0c;状态变量关联的节点不会刷新。通过freezeWhenInactive属性来决定是否使用冻结功能&#xff0c;不传参数时默认不使用。支持的场景有&#xff1a;页面路由&#xff0c;TabCo…

完美解决layui多图上传时,动态给每个图片增加参数

需求&#xff1a;当我在使用layui框架上传多图时&#xff0c;我想动态给每一张图都把它的名称传给后台 data: {id: function(){return $(#id).val();} } 这是官网给的动态传参的方法 我自己根据官网给的案例设置 data:{filesIndex:function(index, file){return file.name}},…

什么是智慧公厕?智慧旅游下的智慧公厕功能和特点

智慧旅游下的智慧公厕功能和特点&#xff1f;智慧旅游是景区、公园、游乐场、文化场馆等领域的一种信息化解决方案&#xff0c;智慧公厕是智慧旅游极为重要的一部分&#xff0c;能大大提升游客满意度。智慧公厕采用物联网、互联网、大数据、云计算等技术&#xff0c;实现旅游景…

gitlab备份与恢复

1.1.1 查看系统版本和软件版本 cat /etc/debian_version cat /opt/gitlab/embedded/service/gitlab-rails/VERSION 1.1.2 数据备份 打开/etc/gitlab/gitlab.rb配置文件&#xff0c;查看一个和备份相关的配置项 sudo vim /etc/gitlab/gitlab.rb gitlab_rails[backup_path] &q…

ffmpeg点对点音视频udp协议传输

参考&#xff1a;https://zhuanlan.zhihu.com/p/636152437?utm_id0 ffmpeg查看可用设备&#xff1a; ffmpeg -list_devices true -f dshow -i dummy1、音频 局域网内两台设备间 设备1-音频&#xff1a; ffmpeg -f dshow -i audio"麦克风阵列 (适用于数字麦克风的英特…

使用Excel连接Azure DevOps自动退出的问题

Azure DevOps Server (原名TFS)是微软公司的软件开发管理平台&#xff0c;也是著名的软件开发过程管理工具&#xff1b;系统中记录了软件开发过程中的需求、问题、缺陷和迭代计划等各种软件开发工作项数据。 对于工作项数据的批量操作(例如新增和编辑)&#xff0c;Excel是一个非…

zabbix图表时间与服务器时间不一致问题

部署完zabbix后&#xff0c;有时候会发现zabbix服务器的时间明明是对的&#xff0c;但是图标的时间不对&#xff0c;通过以下的配置可以快速解决。 登录zabbix-nginx容器 docker exec -u root -it docker-compose-zabbix-zabbix-web-nginx-mysql-1 bash修改php配置文件 vi /e…