目前最流行的三大框架，Angular高版本强制依赖ts，后来react和vue也引入对ts的支持。ts除了是js的超集，还很可能是js的未来，花点时间学一下也是有必要的。先从配置一个ts的web开发环境说起。
首先建立文件夹ts-web并进入，然后初始化npm
# 创建项目文件夹ts-web
mkdir ts-web
# 进入文件夹
cd ts-web
# 初始化npm
npm init -y
安装与ts有关的依赖
# 首先需要全局安装typescript
npm i typescript -g
# 再在项目中安装typescript和ts-loader
npm i typescript ts-loader -D
安装与webpack有关的依赖
npm i webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin -D
./package.json
{
"name": "ts-web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
}
}
- webpack-cli是webpack简易客户端
- webpack-dev-server可以通过配置项启动本地web服务
- webpack-merge用来和并webpack的配置文件
- html-webpack-plugin配置html的入口
- clean-webpack-plugin的作用是编译时清空之前生成的文件
使用tsc --init命令创建tsconfig.json
tsc --init
./tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
}
}
默认会是上面几个属性值，先不用管。
配置webpack
在根目录下创建build文件夹，build文件夹下创建以下四个配置文件
| 文件名 | 说明 |
|---|---|
| webpack.base.config.js | 基本配置 |
| webpack.config.js | 默认配置 |
| webpack.dev.config.js | 开发环境配置 |
| webpack.dev.config.js | 生成环境配置 |
./build/webpack.config.js
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig;
return merge(baseConfig, config);
};
./build/webpack.base.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
})
]
}
这里定义了入口文件是'./src/index.ts'，输出文件名为'app.js'，'plugins'中定义的默认html模板是'./src/tpl/index.html'，需要创建对应的文件。
./build/webpack.dev.config.js
module.exports = {
devtool: 'cheap-module-eval-source-map'
}
./build/webpack.pro.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
此时需要修改一下package.json
./package.json
{
"name": "ts-web",
"version": "1.0.0",
"description": "",
"main": "./src/index.ts",
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
}
}
入口文件"main"改为"./src/index.ts"
"scripts"增加两个脚本"start"和"build"
此时创建html模板
./src/tpl/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>TypeScript Web Demo</title>
</head>
<body>
<div class="app"></div>
<div class="app"></div>
</body>
</html>
创建ts的入口文件
./src/index.ts
let str : string = 'hello ts';
let num : number = 200;
document.querySelectorAll('.app')[0].innerHTML = str;
document.querySelectorAll('.app')[1].innerHTML = num.toString();
启动服务
npm start
访问 http://localhost:8080/ 会看到结果
执行编译命令
npm run build
会看到根目录生成dist文件夹，直接运行里面的index.html即可