typescript环境搭建

webpack+typescript

    1.npm init 初始化项目，会生成文件package.json
        这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。
        name：项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母。
        version：项目版本。
        author：项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan zhangsan@163.com。
        description：项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包。
        keywords：项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。
        private：是否私有，设置为 true 时，npm 拒绝发布。
        license：软件授权条款，让用户知道他们的使用权利和限制。
        dependencies：生产环境下，项目运行所需依赖。
        devDependencies：开发环境下，项目所需依赖。
        scripts：执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”。
        bin：内部命令对应的可执行文件的路径。
        main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件。
        module：是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。
        eslintConfig：EsLint 检查文件配置，自动读取验证。
        engines：项目运行的平台。
        browserslist：供浏览器使用的版本列表。
        style：供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置。
        files：被项目包含的文件名数组
        
    2.全局安装typescript命令：
        npm install typescript
        webpack进行编译我们的TypeScript代码的，会在本地去查找TypeScript的依赖    
        
    3.tsc --init 生成typescript编译配置文件 tsconfig.json    
        经常使用： 
            include： 表示编译需要编译的文件或目录（属于自动指定该路径下的所有ts相关文件）
            exclude： 表示编译器需要排除的文件或文件夹（include的反向操作）
            files： 表示编译需要编译的单个文件列表（属于手动一个个指定文件）
            extends: 引入其他配置文件，继承配置
            compileOnSave: 设置保存文件的时候自动编译（vscode暂不支持该功能，可以使用'Atom'编辑器）
            compilerOptions：编译选项配置 
            查看：https://www.tslang.cn/docs/handbook/compiler-options.html
            
    4.安装webpack相关的依赖 
        npm install webpack webpack-cli webpack-dev-server -D
        使用webpack开发和打包，需要依赖webpack、webpack-cli、webpack-dev-server        
        
    5.安装ts-loader
        npm install ts-loader --save-dev    
        因为我们需要解析.ts文件，所以需要依赖对应的loader：ts-loader
        
    6.安装Webpack插件 html-webpack-plugin 用于自动生成index.html文件
        编译后的代码需要对应的html模块作为它的运行环境，所以我们需要使用html-webpack-plugin来将它插入到对应的模板中
        
    7.cross-env
        npm install cross-env -D
        这个插件的作用是可以在webpack.config.js中通过 process.env.NODE_ENV 来获取当前是开发还是生产环境
    
    8.配置webpack.config.js文件
        参考 https://www.webpackjs.com/configuration/
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        module.exports = {
          entry: "./src/main.ts",
          output: {
            filename: "build.js"
          },
          resolve: {
            extensions: [".tsx", ".ts", ".js"]
          },
          module: {
            rules: [
              {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
              }
            ]
          },

           mode: "development",
          devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
          devServer: {
            contentBase: "./dist",
            stats: "errors-only",
            compress: false,
            host: "localhost",
            port: 8080
          },
          plugins: [
            new HtmlWebpackPlugin({
              template: "./index.html"
            })
          ]
        };
    
    ** 想要在debug时生成相应的map文件，注意两点：
        tsconfig.json 中 sourceMap 设置为 true
        webpack.config.ts中 devtool: "inline-source-map"
    **配置package.json 添加命令
        "scripts": {
            "start": "./node_modules/.bin/webpack-dev-server",
            "build": "./node_modules/.bin/webpack",
            "test": "echo \"Error: no test specified\" && exit 1"
        },