安装构建工具

一. 📦 安装依赖

npm i qgtools -D

---

二. ⚙️ 配置

1. 💬 babel.config.js

Babel 是 JavaScript 的编译器，主要作用是将现代语法（如 ES6+）转译为兼容性更好的旧语法。该配置说明如下：

module.exports = {
  presets: [['@babel/preset-env'], '@babel/preset-react'], // 使用 env 和 React 的语法预设
  plugins: [
    '@babel/plugin-transform-runtime', // 避免重复注入工具函数，提高编译效率
    '@babel/plugin-syntax-dynamic-import', // 支持 import() 语法，实现懒加载模块
    '@babel/plugin-proposal-function-bind', // 支持函数绑定操作符 `::`
    '@babel/plugin-proposal-optional-chaining', // 支持可选链语法（如 obj?.a?.b）
    ['@babel/plugin-proposal-decorators', { legacy: true }], // 支持装饰器语法，legacy 模式更兼容旧项目
    ['@babel/plugin-proposal-class-properties', { loose: false }], // 支持类属性语法，如 `class A { a = 1 }`
  ],
};

---

2. 🌀 postcss.config.js

PostCSS 是一个 CSS 处理工具，这里主要用来集成 TailwindCSS 和添加浏览器兼容性前缀：

module.exports = {
  plugins: {
    tailwindcss: {}, // 使用 TailwindCSS
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'not ie <= 8', // 排除 IE8 及以下
      ],
      grid: true, // 兼容 CSS Grid 布局
    },
  },
};

---

3. 🌈 tailwind.config.js

Tailwind CSS 的自定义配置文件，定义主题、颜色等。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,html}', './public/base.html'],
  theme: {
    extend: {
      colors: {
        background: 'var(--primary-bg-color)', // 可以用 HEX、RGB、HSL 或 CSS 变量
        section: 'var(--primary-section-color)',
        primaryHover: 'var(--primary-hover-color)',
        font: 'var(--font-3-color)',
        border: 'var(--border-color)',
        primary: 'var(--primary-color)',
      },
    },
  },
  sidebar: {
    DEFAULT: 'hsl(var(--sidebar-background))',
    foreground: 'hsl(var(--sidebar-foreground))',
    primary: 'hsl(var(--sidebar-primary))',
    'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
    accent: 'hsl(var(--sidebar-accent))',
    'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
    border: 'hsl(var(--sidebar-border))',
    ring: 'hsl(var(--sidebar-ring))',
  },
  plugins: [require('tailwindcss-animate')],
};

---

4. 📘 tsconfig.json

TypeScript 的配置文件，指定编译选项和项目结构：

{
  "compilerOptions": {
    "allowJs": true, // 允许 JS 文件参与编译
    "noImplicitAny": false, // 允许隐式 any 类型（不推荐开启）
    "allowSyntheticDefaultImports": true, // 允许默认导入没有默认导出的模块
    "moduleResolution": "node", // 使用 Node 风格解析模块
    "skipLibCheck": true, // 跳过 .d.ts 类型检查，提高构建速度
    "esModuleInterop": true, // 更好兼容 CommonJS 模块的导入
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "resolveJsonModule": true, // 允许导入 JSON 文件
    "isolatedModules": true, // 每个文件单独编译，适用于 Babel + TS 项目
    "outDir": "./dist/", // 编译输出目录
    "sourceMap": true, // 生成源码映射，便于调试
    "module": "ESNext", // 使用 ESNext 模块规范（如 import/export）
    "target": "es5", // 编译为 ES5，适配旧浏览器
    "jsx": "react", // 支持 JSX，适用于 React 项目
    "baseUrl": "./", // 设置基础路径
    "paths": {
      "@/*": ["src/*"] // 配置路径别名，如 @/utils 解析为 src/utils
    }
  },
  "exclude": ["node_modules", "app-update", "core", "pro-core", "py-update", "config", "code_sign", "nsis-diy-package"],
  "include": [
    "./scss.d.ts", // 用于 SCSS 模块的类型定义
    "./src/**/*" // 编译 src 下所有文件
  ]
}

---

5. 🧩 webpack.config.js

Webpack 的主配置文件，定义打包入口、输出、模块规则等：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的代码块进行拆分
      cacheGroups: {
        assets: {
          test: /[\\/]src[\\/]assets[\\/]/, // 将 assets 中资源打成一个包
          name: 'assets',
          priority: 53, // 优先级较高
        },
        react: {
          test: /[\\/]node_modules[\\/]react(.*)?[\\/]/, // 将 React 相关包独立打包
          name: 'react',
          priority: 50,
        },
        main: {
          test: /[\\/]node_modules[\\/]/, // 其他 node_modules 打包到 main 中
          name: 'main',
          priority: 1,
        },
      },
    },
  },
};

---

6. 🧭 jsconfig.json

用于 JavaScript 项目的 VSCode 智能提示与路径别名支持（或为 TS 项目的辅助配置）：

{
  "compilerOptions": {
    "baseUrl": ".", // 基础路径
    "paths": {
      "@/*": ["src/*"] // 定义路径别名
    },
    "checkJs": false // 不检查 JS 类型
  },
  "exclude": ["node_modules", "dist", "plop-templates"], // 排除这些目录
  "include": ["src/**/*"] // 包含 src 下所有文件
}

• 上述配置文件都放在根目录即可 Webpack (qgtools) 会自动识别，具体配置可根据项目情况灵活调整。