最近简单学习了一下ts发现还真有点香，借双休总结回顾一下，先来回顾搭建一个可以运行ts文件的环境，这样后面编译ts就方便了
1 安装typescript
1.1 在拥有node的系统环境通过npm安装typescript
npm install typescript -g
|
1.2 查看版本检查是否安装成功
安装成功后就可以通过指令编译ts文件了,会在目录生成对应js文件
感觉老是这样通过指令编译感觉很麻烦，那可以通过webpack配置对应的loader编译ts文件
2 配置webpack 编译ts
2.1 创建项目目录
目录结构
- src //存放源文件
– main.ts
- build // 存放webpack配置文件
– webpack.config.js
- index.html // 入口页面
2.2 初始化npm
2.3 在项目中安装typescript
2.4 初始化tsconfig.json文件
在配置文件中的lib可以加载额外的模块
2.5 安装并配置tslint来约束代码
npm i tslint -g; tslint -i
|
2.6 安装webpack相关插件
npm install webpack webpack-cli webpack-dev-server -D
|
2.7 在package.json 里配置启动脚本
"serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
|
2.8 安装 cross-env 判断当前是开发环境还是生产环境
安装cross-env
在webpack配置文件中判断环境
devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
|
2.9 安装webpack loader: ts-loader 来解析 .ts文件
在配置文件中配置rule来解析 .ts文件
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
|
2.10 安装 html-webpack-plugin 来配置入口视图
npm install html-webpack-plugin -D
|
webpack配置插件
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
|
2.11 在build文件夹中webpack.config.js 来配置webpack完整配置
2.12 在src文件夹中main.ts 编写代码或导入模块
2.13 启动项目
启动项目，打开地址，和控制台就可以看到ts编译后运行的结果了
而不用一个一个文件通过指令编译了
完整目录
目录路径：
完整webpack配置
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: 8888
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
};
|
参考
TypeScript(二)使用Webpack搭建环境
微信
支付宝