// 熱更新的ts文件

·
單個文件的熱更新： tsc 文件名.ts -watch | -w
? 多個文件的熱更新： 在根目錄下創(chuàng)建一個tsconfig.json 的文件, tsc -w 后即可熱更新

// tsconfig.json的配置選項

? include: 指定編譯的文件

? ** ： 表示任意路徑

? * ： 表示任意文件

    "include": [ "./src/**/*" ] // => 根目錄下的src文件中的任意路徑(**)的任意文件(*)

? exclude: 不需要編譯的文件

"exclude": ["node_modules", "bower_components", "jspm_packages"] // 默認值

? extends: 定義被繼承的配置文件

"extends":  "./configs/base" // => 是指引入在configs中的base.json的文件

? files: 指定被編譯文件的列表，*只有需要編譯的文件少時才會用

// **compilerOptions: ** 編譯器的選項

? **target: ** 用于指定TS被解析的ES的版本

    "target": "es2015" // 可選項 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"

? module: 指定es的模塊化方案

    "module": "es2015" // 可選項： "none", "commonjs", "amd", "system", "umd", "es6", "es2015", "es2020", "esnext"

? lib: 依賴的庫，一般不需要修改

    "lib":  [] /* 'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017' 
'es2018' 'es2019' 'es2020' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asyncgenerator' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.bigint' 'es2020.promise' 'es2020.string' 'es2020.symbol.wellknown' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 'esnext.string' 'esnext.promise' */

? outDir: 用于存放編譯后的文件所在目錄

    "outDir": "./dist"

? outFile: 設(shè)置outFile后 會吧所有的文件合并到同一個文件中并且 只有符合"amd"，和"system" 模塊化的文件才能合并到同一個文件

    "outFile": "./dist/app"

? allowJs: true // 是否編譯JS

? checkJs: true // 是否校驗符合Ts語法的JS

? * 一般都是同時 使用 均為布爾值

? removeComments: true // 是否編譯注釋

? noEmit: false // 不生成編譯后的文件

? noEmitOnError： true // 不編譯錯誤的文件

? alwaysStrict: true // 用于編譯后的js文件是否使用嚴格模式(模塊代碼自帶嚴格模式)

? noImplicitAny: true // 不允許變量沒有數(shù)據(jù)類型（即：不聲明變量的數(shù)據(jù)類型，默認為：any）

? noImplicitThis: true // 不允許不明確類型的this（即：需要標注this的來源或者類型）

function fn(this: window) {
    console.log(this)
}

? strictNullChecks: true // 嚴格檢測空值

? strict: true // 所有嚴格選項的總開關(guān)

// webpack打包TS

初始化項目: npm init -y 創(chuàng)建package.json文件

安裝依賴: npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin

  *  -D : 開發(fā)版；
  *  webpack-cli: webpack命令行   
  *  ts-loader: webpack的整合器，使ts編譯與之一體
  *  html-webpack-plugin：webpack中html插件，用來自動創(chuàng)建html文件
  *  webpack-dev-server: webpack開發(fā)服務(wù)
  *  clean-webpack-plugin：webpack中的清除插件，每次build都會先清除目錄

配置webpack: 根目錄下創(chuàng)建webpack的配置文件webpack.config.js

• environment // 打包配置后 （打包后不使用箭頭函數(shù)）

// 引入包
const path = require("path")
// 引入 webpack 的 html 插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
// 引入build時刪除的dist的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack的鎖頭配置文件都要寫在 module.exports 中
module.exports = {
  // 指定入口文件
  entry: "./src/index.ts" ,
  // 指定到打包后的文件目錄
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 打包后的文件的文件
    filename: "bundle.js",
      
    // 打包配置后 （打包后不使用箭頭函數(shù)）
    environment: {
      arrowFunction: true // 兼容IE11一下
    }
      
  },
  // 指定webpack打包時使用的模塊
  module: {
    // 指定打包后的規(guī)則
    rules: [
      {
        // test 指定生效的文件
        test: /\.ts$/,
        // 使用 ts-loader 編譯所有的 .ts的文件
        use: [
          // 配置babel
          {
            // 指定加載器
            loader: "babel-loader",
            options: {
              // 設(shè)置預定義的運行環(huán)境
              presets: [
                [
                  // 指定環(huán)境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的瀏覽器版本
                    targets: {
                      "chrome": "58",
                      "ie": "11"
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式： usage=>按需加載
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          'ts-loader'
          ],
        // 要排除的文件
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 創(chuàng)建html插件實例
    new HTMLWebpackPlugin({
        // 網(wǎng)頁模板 
        template: "./src/index.html"
      }),
  ],
  // 設(shè)置可引用的模塊
  resolve: {
    extensions: ['.ts', '.js']
  }
}

配置TS編譯選項: 根目錄下創(chuàng)建tsconfig.json，(配置可以根據(jù)自己需要)

{
   "compilerOptions": {
       "target": "ES2015",
       "module": "ES2015",
       "strict": true
   }
}

修改package.json配置: 添加build與start

{
   ...
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
   },
   ...
}

項目啟用: 在src下創(chuàng)建ts文件，并在并命令行執(zhí)行npm run build對代碼進行編譯；或者執(zhí)行npm start來啟動開發(fā)服務(wù)器；

// babel包

? 作用：用于兼容各個版本的瀏覽器

? 安裝： npm i @babel/core @babel/preset-env babel-loader core-js

? * @babel/core: babel主要庫

? * @babel/preset-env： babel預置環(huán)境 （適應(yīng)不同瀏覽器）

? * babel-loader: 合并包

? * core-js: js運行環(huán)境 （模擬不同的版本瀏覽器）

• babel配置在上方webpack.config.js中