Webpack TypeScript Of BabelLoader

2024年08月01日

柏拉文

越努力，越幸运

一、认识

---

基于 babel-loader 构建 TypeScipt 运行环境

二、准备

---

你需要安装 babel-loader、@babel/core、@babel/preset-env 和 @babel/preset-typescript

pnpm add webpack webpack-cli typescript babel-loader @babel/core @babel/preset-env @babel/preset-typescript 
-D

三、构建

---

3.1 .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

3.2 index.ts

const a: number = 3;
const b: string = "";

console.log("a", a);
console.log("b", b);

3.3 package.json

{
  "name": "babel-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -c webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/preset-typescript": "^7.24.7",
    "babel-loader": "^9.1.3",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4"
  }
}

3.4 tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "moduleResolution": "node"
  }
}

3.5 webpack.config.js

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "index.ts"),
  output: {
    clean: true,
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
};