TypeScript & Webpack

现在光能用TypeScript写代码还不行，还得让Webpack支持TS转JS才行。
之前我们ES6转ES5时是让Webpack通过Babel配置来转换，这次TypeScript也可以通过Babel配置给Webpack转换。

npm i -D @babel/preset-typescript

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env", // ES
      {
        targets: {
          browsers: ["> 0.25%", "not dead"],
        },
      },
    ],
    [
      "@babel/preset-typescript", // TS
    ],
  ],
};

对应的Webpack配置入口和babel-loader解析后缀都需要修改。

// webpack.base.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: path.resolve(__dirname, "../src/index.ts"),
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
      favicon: path.resolve(__dirname, "../public/logo.svg"),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
      },
    ],
  },
};

到这里再去执行npm run build就会发现构建没有问题了。

前面使用@babel/preset-typescript进行转换的方式的优点在于构建效率快，但缺点是缺少类型检查。
为了兼容不同的使用人群，这边也介绍下使用ts-loader的方式，优点是具有类型检查，缺点则是构建效率较慢。

npm i -D ts-loader

// webpack.base.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: path.resolve(__dirname, "../src/index.ts"),
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
      favicon: path.resolve(__dirname, "../public/logo.svg"),
    }),
  ],
  module: {
    rules: [
      {
        // test: /\.(js|ts)$/,
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          configFile: path.resolve(process.cwd(), 'tsconfig.json')
        },
      },
    ],
  },
};

npm run dev # 构建看看效果

这个时候我们再尝试写下错误的类型，就会看到终端会出现报错信息。

// src/index.ts
interface Test {
  a: number;
  b: string;
  c: string;
}

const test: Test = {
  a: 111,
  b: "111",
};

console.log(test);

最后总结下，这里我们介绍了两种方式来转换TS：

• @babel/preset-typescript 这种方式的好处在于构建效率快，但缺点是缺少类型检查。
• ts-loader 这种方式的优点是构建时会进行类型检查，但构建效率慢。

提示

本项目使用的是ts-loader

具体使用哪种方式来转换TS，就看个人的取舍了，这里不做推荐。