跳到主要内容

Webpack TypeScript Of SWCLoader

2024年08月01日
柏拉文
越努力，越幸运

一、认识​

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

二、准备​

你需要安装 swc-loader、@swc/core、@swc/cli

 pnpm install webpack webpack-cli swc-loader @swc/core @swc/cli typescript -D

三、构建​

3.1 .swcrc​

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

3.2 index.ts​

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

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

3.3 package.json​

{
  "name": "swc-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -c webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@swc/cli": "^0.4.0",
    "@swc/core": "^1.7.4",
    "swc-loader": "^0.2.6",
    "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: ["swc-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
};