目前最风行的三大框架，，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
shell 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"