RsPack TypeScript

2024年11月11日

柏拉文

越努力，越幸运

一、认识

---

二、准备

---

构建依赖: 安装 @rspack/core 和 @rspack/cli 为 dev 依赖

pnpm add @rspack/core @rspack/cli -D

TypeScript 依赖: 安装 typescript

pnpm add typescript -D

三、配置

---

3.1 package.json

"scripts": {
    "dev": "rspack dev",
    "build": "rspack build"
 }

3.2 tsconfig.json

{
    "compilerOptions": {
      "target": "ES2020",
      "lib": ["DOM", "ES2020"],
      "module": "ESNext",
      "jsx": "react-jsx",
      "strict": true,
      "skipLibCheck": true,
      "isolatedModules": true,
      "resolveJsonModule": true,
      "moduleResolution": "bundler",
      "useDefineForClassFields": true
    },
    "include": ["src"]
  }

3.3 rspack.config.js

const Path = require("path");
const rspack = require("@rspack/core");

/** @type {import('@rspack/cli').Configuration} */
const config = {
  entry: {
    main: "./src/index.tsx",
  },
  output: {
    path: Path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: ["...", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        type: 'javascript/auto',
        exclude: [/node_modules/],
        use: [
          {
            loader: "builtin:swc-loader",
            options: {
              sourceMap: true,
              jsc: {
                parser: {
                  syntax: "typescript",
                },
                externalHelpers: true,
              },
            },
          },
        ],
      },
    ],
  },
};

module.exports = config;