TypeScript学习1、搭建TS环境

搭建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"