开发typescript项目有一些现成的脚手架，比如：typescript-library-starter，它的配置齐全，更适合用在实际项目开发上。其实在学习阶段可以自己搭建一个简单的typescript运行环境，只用作学习typescript语法。
初始化项目
依次执行：
mkdir ts-learn-demo cd ts-learn-demo npm init -y
然后全局安装 typescript，便于在任意文件夹使用 tsc 命令：
// 安装失败的话请以管理员身份运行，此处是sudo命令是mac上管理员权限
sudo npm install typescript -g
安装成功后进入项目根目录，使用 tsc 命令进行初始化：
tsc --init
此时项目根目录里多了一个 tsconfig.json 文件，它的配置信息参考：https://www.tslang.cn/docs/handbook/tsconfig-json.html
在项目里安装 typescript，注意这一次不是全局安装，全局安装是为了tsc命令，这里是为了本地编译和开发
npm install typescript
配置TSLint（可选）
类似ESLint，统一代码风格，全局安装TSLint:
sudo npm install tslint -g
然后在项目中初始化：
tslint -i
此时项目目录中会多一个 tslint.json 文件，关于它的配置可自行百度，在学习阶段默认的配置即可。
配置webpack
使用webpack进来开发和打包，先安装一些必要的插件：
npm install webpack webpack-cli webpack-dev-server -D npm install html-webpack-plugin clean-webpack-plugin -D npm install ts-loader -D
在项目根目录创建 webpack.config.js 文件：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'main.js'
},
resolve: {
extensions: ['.js', 'ts', 'tsx']
},
module: {
// 配置以.ts/.tsx结尾的文件都用ts-loader解析
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
devServer: {
contentBase: './dist',
stats: 'errors-only',
compress: false,
host: 'localhost',
port:
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/template/index.html'
})
]
}
上述webpack配置信息中可知，项目源码放在 src 目录下，入口文件是 ./src/index.ts 。接下来还要创建模板html文件，在 ./src/template目录下创建index.html模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TS Demo</title>
</head>
<body></body>
</html>
目录结构如下：
开发和打包
webpack配置文件已经写好，接下来只要写好script命令就可以轻松开发了。在package.json文件中指定命令：
// start 是启动本地开发
// build是打包
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js"
},
注意到命令里有一个 cross-env，这个是指定当前环境变量的，需要安装一下：
npm install cross-env
好了，现在在index.ts随便写一些ts代码测试一下：
// ./src/index.ts let str: string = 'hello world' document.write(str)
本地启动服务执行：
npm start
打包执行：
npm run build
结尾
此typescript运行环境只是简单的做到可执行ts文件，还有很多不足之处，在学习typescript的同时，可以再慢慢改善。
尝试自己搭一个简单的typescript运行环境的更多相关文章
-
通过Jetty搭建一个简单的Servlet运行环境
最近在做一些简单的Servlet开发的时候,感觉每次调试的时候都要发布到tomcat上很麻烦,把程序共享给同事也很麻烦,需要帮他设置本地的tomcat环境. 在网上找了找其他的Servlet运行环境, ...
-
VS Extension+NVelocity系列(一)&mdash;&mdash;构建一个简单的NVelocity解析环境
一.前言 本节我们将实际实现一个简单的NVelocity解析环境,以便为以后的实例做一些基本工作,虽然NVelocity如何使用已经属于老掉牙的话题,但我只能专门挑出来一章来做铺垫.人生就是这样无奈啊 ...
-
手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
-
webpack 之 一个简单的基本生产环境配置
webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...
-
由一个简单需求到Linux环境下的syslog、unix domain socket
本文记录了因为一个简单的日志需求,继而对linux环境下syslog.rsyslog.unix domain socket的学习.本文关注使用层面,并不涉及rsyslog的实现原理,感兴趣的读者可以参 ...
-
iBatis第二章：搭建一个简单的iBatis开发环境
使用 iBatis 框架开发的基本步骤如下:1.新建项目(iBatis是持久层框架,可以运用到java工程或者web工程都可以) 这里我们建立一个 web 工程测试. 2.导入相应的框架 jar 包 ...
-
带你搭一个SpringBoot+SpringData JPA的环境
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家对SpringBoot和Spring Da ...
-
[Py] 简单的 Python 运行环境
python:https://www.python.org/downloads/ pip:https://pip.pypa.io/en/stable/installing/#upgrading-pip ...
-
模拟搭建Web项目的真实运行环境（一）
序言 最近尝试完整搭建一个Web项目的运行环境,总结一下这几个月学到的知识点. 后面的文章主要包括一下几个内容: A. 搭建一个Linux服务器,用来部署Redis.Mongo等数据存储环境: B. ...
随机推荐
-
JavaScript 自定义对象
在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式:对象直接量.new 构造函数.Objec ...
-
Sqli-LABS通关笔录-12
通过这个关卡我学习到了: 1.双引号千万别忘记,就是因为忘了弄了好一会儿.一直不报错. 2. 00x1万能密码构造二 报错的内容为: You have an error in your SQL syn ...
-
lnmp安装--php安装
版本:php5.6.4 x86_64 centos 6.6 x86_64 安装php之所以难,是因为要安装的扩展多,依赖关系复杂. 安装前的准备: 先看你想要安装哪些扩展.需要哪些包.下载地址:htt ...
-
不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
-
Python——Selenium &; Chrome Driver配置
1.CMD下载安装selenium pip install selenium 2.python运行: from selenium import webdriver browser = webdrive ...
-
ESP8266 nodemcu
主要资料来源于一下几个网站 1.nodemcu官网:此处有几个示例和github(用处不大) 2.用户说明:http://nodemcu.readthedocs.io/en/master/ (非常重 ...
-
mysql 的sleep线程过多处理方法
php程序不要使用长连接:java程序调整连接池 什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输-& ...
-
Selenium（Python）等待元素出现
1.显式等待 from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdri ...
-
通过c++ 读写文本文件的中文乱码的解决方法
前提:VS2010 ,MFC ,文本文件为ANSI格式. 读文件: CString str,fileContent;CStdioFile myFile, File;if(myFile.Open(Gen ...
-
NOIP前的刷题记录
因为这几天要加油,懒得每篇都来写题解了,就这里记录一下加上一句话题解好了 P4071 [SDOI2016]排列计数 组合数+错排 loj 6217 扑克牌 暴力背包 P2511 [HAOI2008 ...