搭建TS环境
1、全局安装 typescript和tslint, cnpm i -g typescript tsLint。
2、tsc -v 检查版本， 是否安装成功。
3、tsc --init 初始化tsc配置,项目目录会多出一个tsconfig.json配置文件。
4、安装webpack4, cnpm i -D webpack webpack-cli webpack-dev-server。
5、安装开发环境依赖
clean-webpack-plugin 打包前清除上次打包文件。
html-webpack-plugin 打包引入的模板。
ts-loader 解析ts语法。
typescript 支持ts。
cross-env 启动项目是传入参数区分生产环境和开发环境。
6、新建webpack.config.js,简单配置webpack。
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
console.log(process.env.NODE_ENV)
module.exports = {
entry: "./src/index.ts",
mode:process.env.NODE_ENV,
output:{
filename:"main.js",
},
resolve:{
extensions:[".ts",".tsx",".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:[
//每次打包之前清除dist文件夹
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns:['./dist']
}),
new HtmlWebpackPlugin({
template:"./src/template/index.html"
})
]
}
7、再package.json中配置启动项
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
