搭建一个typescript的学习环境

在vscode中有了Code Runner插件，可以直接运行.ts文件。但是没办法查看在游览器中的运行情况。 所以搭建一个有html的环境，对于学习typescript还是很有价值的。

第一步 生成package.json

npm init

第二步 全局安装typescript

npm install typescript tslint -g

第三步 ts初始化

tsc --init // 生成tsconfig.js配置文件

第四步 安装webpack

npm install webpack webpack-cli@3.3.12 webpack-dev-server -D

webpack-cli 要安装4.0以下的版本，不然会报错

第五步 安装插件

npm i typescript // 前面是全局的，这里是项目的
npm i ts-loader clean-webpack-plugin html-webpack-plugin cross-env -d

ts-loader： ts的处理
clean-webpack-plugin：清理指定文件或文件夹
html-webpack-plugin：能够指定编译的模板
cross-env：运行跨平台设置和使用环境变量的脚本

第六步 文件目录

build
    webpack.config.js
src
    template
        index.html
    index.ts
package.json // 运行npm init 然后生成的
tsconfig.json // 运行tsc --init 然后生成的

第七步 配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: "./src/index.ts", // 入口文件
    output:{
        filename:"main.js" // 编译完的输出文件
    },
    resolve:{
        extensions: ['.js','.tsx','.ts'], // 自动解析的文件，引文件的时候可以不加后缀名
    },
    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: 8089
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist'] // 打包之前先清理。./dist文件夹
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html' // 引入编译好的main.js
        })
    ]

}

第八步 编写package.json script部分

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=product webpack --config ./build/webpack.config.js"
  },

通过cross-env进行传参 “cross-env NODE_ENV=development” ，在配置的webpack.config.js中的devtool中可以体现