vue3-quickstart-cli/bin/plugins/typescript.js

一个用于快速创建 Vue3 项目的脚手架工具。

import path from 'path';
import fs from 'fs-extra';
import chalk from 'chalk';
const plugin = {
    name: 'typescript',
    apply(targetDir, pkg) {
        pkg.devDependencies = pkg.devDependencies || {};
        pkg.devDependencies['typescript'] = '^5.3.3';
        pkg.devDependencies['@types/node'] = '^20.10.5';
        pkg.devDependencies['@vitejs/plugin-vue-jsx'] = '^5.0.1';
        fs.writeFileSync(path.join(targetDir, 'tsconfig.json'), `{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
`);
        const srcDir = path.join(targetDir, 'src');
        const candidates = [
            'main.js', 'main.jsx', 'main.mjs', 'main.cjs', 'main.tsx'
        ];
        let renamed = false;
        for (const file of candidates) {
            const filePath = path.join(srcDir, file);
            const mainTs = path.join(srcDir, 'main.ts');
            if (fs.existsSync(filePath)) {
                fs.renameSync(filePath, mainTs);
                renamed = true;
                break;
            }
        }
        const mainTsPath = path.join(srcDir, 'main.ts');
        if (!fs.existsSync(mainTsPath)) {
            fs.writeFileSync(mainTsPath, `import { createApp } from 'vue';\nimport App from './App.vue';\nimport store from './store';\nimport router from './router';\n\nconst app = createApp(App);\n\napp.use(store);\napp.use(router);\napp.mount('#app');\n`);
            console.log(chalk.yellow('未检测到入口文件，已自动生成 main.ts。'));
        }
        const appVue = path.join(targetDir, 'src/App.vue');
        if (fs.existsSync(appVue)) {
            let appCode = fs.readFileSync(appVue, 'utf-8');
            appCode = appCode.replace('<script setup>', '<script setup lang="ts">');
            fs.writeFileSync(appVue, appCode, 'utf-8');
        }
        console.log(chalk.green('已集成 TypeScript，入口文件为 main.ts！'));
    }
};
export default plugin;