默认情景是在Win系统
前置条件:
安装 NodeJs
安装
typescript
模块:
npm install -g typescript
为了确保安装了typescript
模块,请在命令行终端验证一下:
tsc -v #可以看到安装的typescript版本
这里的开发工具是vscode
,实际使typescript
可以自动编译成JS文件的是webpack
。
首先,创建一个目录作为工作目录,该目录的结构如下:
. +-- index.html +-- build | +-- webpack.config.js +-- src +-- main.ts
目录结构说明:
index.html
文件用来在浏览器运行JS文件build
目录下的webpack.config.js
文件用来配置webpack
src
目录里面的main.ts
用来编写typescript
代码
以上所有的目录和文件都先创建好
再使用npm
初始化编译环境
npm init -y #初始化package.json npm install typescript #初始化本地typescript tsc --init #初始化tsconfig.json
安装tslint
并初始化配置
typescript
的风格比较的严谨,所以安装tslint
:
npm install tslint -g tslint -i
安装webpack
和相关依赖
npm intall webpack webpack-cli webpack-dev-server -D
因为只是在本地搭建的一个编译环境,所以无需全局安装
设置启动脚本
#package.json "scripts":{ "test":"echo "Error: no test specified" && exit 1", "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js" },
其他依赖安装
npm install cross-env -D #识别生成环境or开发环境 npm install ts-loader -D #解析.ts文件 npm install html-webpack-pluin -D #处理html文件模块
配置文件webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/main.ts", output: { filename: "build.js" }, resolve: { extensions: [".tsx", ".ts", ".js"] }, module: { 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: 8080 }, plugins: [ new HtmlWebpackPlugin({ template: "./index.html" }) ] };
以上全部完成之后就可以在main.ts
里面编写typescript
代码,通过命令npm run serve
启动服务之后,随着每次的改动,通过浏览器查看http://localhost:8080/
代码是随着改动的,无需手动刷新浏览器。