typescript编译工具&代码检查工具（day09）

//webpack.base.consig.js
// 公共环境的配置

//引入类型检查插件
// const ForkTsCheckWebpackPlugin = require('fork-ts-checker-webpack-plugin')

//awesome-typescript-loader自带类型检查插件
const { CheckerPlugin } = require('awesome-typescript-loader')

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  output: {
    // 输出文件名，输出目录默认disk
    filename: 'app.js',
  },
  resolve: {
    // 指定扩展名
    extensions: ['.js', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        // 安装ts-loader : npm i ts-loader typescript -D
        // ts-loader正则，以ts或tsx结尾的文件
        test: /\.tsx?$/i,
        use: [{
          // loader: 'ts-loader',
          // 安装  npm i awesome-typescript-loader -D
          loader: 'awesome-typescript-loader',  
          options:{
            //安装插件做类型检查 npm i fork-ts-checker-webpack-plugin -D
            transpileOnly: true //只语言转换，不做类型检查
          }
        }],
        // 排除
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    // 插件，通过模板生成网站首页，把输入文件嵌入，需要安装
    // npm i html-webpack-plugin -D
    new HtmlWebpackPlugin({
      template: './src/tpl/index.html',
    }),
    // new ForkTsCheckWebpackPlugin(),
    new CheckerPlugin(),
  ],
};

编译工具

ts-loader 与 awesome-typescript-loader

ts-loader

• 可开启transpileOnly: true只做语言转换，不做类型检查
• 通过插件fork-ts-checker-webpack-plugin做类型检查

awesome-typescript-loader

• 可开启transpileOnly: true只做语言转换，不做类型检查
• 通过自带插件CheckerPlugin做类型检查（有缺陷）
  

bable

代码检查工具