TypeScript 的编译配置 + webpack打包

// 热更新的ts文件

·
单个文件的热更新： tsc 文件名.ts -watch | -w
​ 多个文件的热更新： 在根目录下创建一个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: 设置outFile后 会吧所有的文件合并到同一个文件中并且 只有符合"amd"，和"system" 模块化的文件才能合并到同一个文件

    "outFile": "./dist/app"

​ allowJs: true // 是否编译JS

​ checkJs: true // 是否校验符合Ts语法的JS

​ * 一般都是同时 使用 均为布尔值

​ removeComments: true // 是否编译注释

​ noEmit: false // 不生成编译后的文件

​ noEmitOnError： true // 不编译错误的文件

​ alwaysStrict: true // 用于编译后的js文件是否使用严格模式(模块代码自带严格模式)

​ noImplicitAny: true // 不允许变量没有数据类型（即：不声明变量的数据类型，默认为：any）

​ noImplicitThis: true // 不允许不明确类型的this（即：需要标注this的来源或者类型）

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

​ strictNullChecks: true // 严格检测空值

​ strict: true // 所有严格选项的总开关

// webpack打包TS

初始化项目: npm init -y 创建package.json文件

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

  *  -D : 开发版；
  *  webpack-cli: webpack命令行   
  *  ts-loader: webpack的整合器，使ts编译与之一体
  *  html-webpack-plugin：webpack中html插件，用来自动创建html文件
  *  webpack-dev-server: webpack开发服务
  *  clean-webpack-plugin：webpack中的清除插件，每次build都会先清除目录

配置webpack: 根目录下创建webpack的配置文件webpack.config.js

• environment // 打包配置后 （打包后不使用箭头函数）

// 引入包
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",
      
    // 打包配置后 （打包后不使用箭头函数）
    environment: {
      arrowFunction: true // 兼容IE11一下
    }
      
  },
  // 指定webpack打包时使用的模块
  module: {
    // 指定打包后的规则
    rules: [
      {
        // test 指定生效的文件
        test: /\.ts$/,
        // 使用 ts-loader 编译所有的 .ts的文件
        use: [
          // 配置babel
          {
            // 指定加载器
            loader: "babel-loader",
            options: {
              // 设置预定义的运行环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的浏览器版本
                    targets: {
                      "chrome": "58",
                      "ie": "11"
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式： usage=>按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          'ts-loader'
          ],
        // 要排除的文件
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 创建html插件实例
    new HTMLWebpackPlugin({
        // 网页模板 
        template: "./src/index.html"
      }),
  ],
  // 设置可引用的模块
  resolve: {
    extensions: ['.ts', '.js']
  }
}

配置TS编译选项: 根目录下创建tsconfig.json，(配置可以根据自己需要)

{
   "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下创建ts文件，并在并命令行执行npm run build对代码进行编译；或者执行npm start来启动开发服务器；

// babel包

​ 作用：用于兼容各个版本的浏览器

​ 安装： npm i @babel/core @babel/preset-env babel-loader core-js

​ * @babel/core: babel主要库

​ * @babel/preset-env： babel预置环境 （适应不同浏览器）

​ * babel-loader: 合并包

​ * core-js: js运行环境 （模拟不同的版本浏览器）

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