2020-10-28

                       编写第一个TypeScript程序

一、下载

Node.js : https://nodejs.org/en/download/

vscode(visual studio code) : https://code.visualstudio.com/Download

二、在VSCode中编写第一个TypeScript程序

（1）打开VSCode，在本地创建新文件夹ts_first_program，并在VSCode中打开该文件夹

（2）在控制台（TERMINAL）输入口令：npm init -y，会创建一个package.json文件

（3）全局安装typescript，在TERMINAL中输入口令：npm i typescript -g

（4）初始化配置信息(增加tsconfig.json)，在TERMINAL中输入口令：tsc --init

（5）新建src目录 ，并在该目录下创建index.ts ：

          编辑index.ts：  ，

          在TERMINAL中输入口令运行该文件：tsc ./src/index.ts 

         生成了index.js文件： 

（6）配置构建工具：

         1、安装三个包(webpack、webpack-cli、webpack-dev-sever)，在TERMINAL中输入口令：

         npm i webpack webpack-cli webpack-dev-server -D

         2、在该项目下新建build目录，并创建（拷贝）webpack.base.config.js、webpack.config.js、webpack.dev.config.js、        webpack.pro.config.js到该目录:

         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'
        })
    ]
}

           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);
};

           webpack.dev.config.js:

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                devtools: 'cheap-module-eval-source-map'
            }
        })
    ]
}

          webpack.pro.config.js:

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

module.exports = {
    plugins : [
        new CleanWebpackPlugin()
    ]
}

（7）安装配置文件中引用的相应的插件

         1、安装ts-loader：npm i ts-loader typescript -D

         2、安装html插件：npm i html-webpack-plugin -D

         3、为生产环境（pro）安装clean-webpack-plugin(A webpack plugin to remove/clean your build folder)：npm i clean-webpack-plugin -D

         4、安装合并配置文件的组件：npm i webpack-merge -D

（8）创建html文件

         1、在src目录下创建文件夹tpl，在tpl文件夹下创建index.html文件：

         2、在index.html中输入快捷命令：html:5 

         3、对该文件进行修改：

（9）构建开发环境的脚本：

         1、修改package.json文件中的进入文件目录和启动口令：

             "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js"

          2、修改index.ts文件，改变网页内容：

          3、输入启动口令：npm start

          4、打开相应的本地端口，显示界面： 

（10）编写构建生产环境的脚本：

          1、修改package.json,增加build口令：

               "build": "webpack --mode=production --config ./build/webpack.config.js"

          2、运行口令：npm run build

三、遇到的问题:

1、如果安装的过程中遇到某个组件版本不匹配的问题，则安装一下该组件，例如我在安装的过程中遇到了colorette版本不匹配的问题： ,

     通过口令查看该组件的信息：npm view colorette

     发现我安装的colorette是1.2.0，和安装webpack-cli所需要的colorette@1.2.1不匹配，则通过口令安装colorette新版本：

      npm i colorette 

      安装完之后在通过npm view colorette查到colorette版本已经升级成了1.2.1

2、npm start之后提示错误：

      通过npm view分别查看webpack/webpack-cli/webpack-dev-server的版本，最后修改了webpack-dev-server的版本号为3.3.12，口令为：npm i webpack-cli@3.3.12

      该问题相关案例链接：https://github.com/webpack/webpack-dev-server/issues/2029

四、建议：

安装TypeScript Auto Compiler。在VS Code插件库中搜索“TypeScript Auto Compiler”，安装上这个插件，然后在项目工程里tsc --init之后，生成了tsconfig.json文件。之后每次保存ts文件就会自动生成对应的js文件。