@weig_3078/cli-demo 0.1.0

package/lib/create.js

@@ -0,0 +1,328 @@
+const path = require('path')
+const fs = require('fs-extra')
+const os = require('os')
+const inquirer = require('inquirer')
+const execa = require('execa')
+const chalk = require('chalk')
+const PromptModuleAPI = require('./PromptModuleAPI')
+const Creator = require('./Creator')
+const Generator = require('./Generator')
+const clearConsole = require('./utils/clearConsole')
+const executeCommand = require('./utils/executeCommand')
+
+const DEFAULT_CONFIG_PATH = path.join(os.homedir(), '.mvc-default.json')
+
+const REMOTE_TEMPLATES = [
+    {
+        name: 'vite-full (gitee)',
+        repoUrl: 'https://gitee.com/sohucw/vite-full.git',
+        repoBranch: 'master',
+    },
+    {
+        name: 'custom',
+        repoUrl: '',
+        repoBranch: '',
+    },
+]
+
+function logStep(current, total, message) {
+    console.log(chalk.cyan(`\n[${current}/${total}] ${message}`))
+}
+
+function logSuccess(message) {
+    console.log(chalk.green(`✔ ${message}`))
+}
+
+function printNextSteps(name, skipInstall, pm = 'npm', registry) {
+    console.log(chalk.cyan('\nNext steps:'))
+    console.log(chalk.white(`  cd ${name}`))
+    if (skipInstall) console.log(chalk.green(`  ${pm} install${registry ? ` --registry=${registry}` : ''}`))
+    console.log(chalk.green(`  ${pm} run dev\n`))
+}
+
+async function promptFeatures() {
+    const { featureMode } = await inquirer.prompt([
+        {
+            name: 'featureMode',
+            type: 'list',
+            message: 'Pick feature mode:',
+            choices: [
+                { name: 'Default config', value: 'default' },
+                { name: 'Manual select', value: 'manual' },
+            ],
+            default: 'default',
+        },
+    ])
+
+    if (featureMode === 'default') {
+        if (await fs.pathExists(DEFAULT_CONFIG_PATH)) {
+            return await fs.readJson(DEFAULT_CONFIG_PATH)
+        }
+        return {
+            features: ['babel', 'router', 'vuex', 'linter'],
+            historyMode: false,
+            eslintConfig: 'airbnb',
+            lintOn: ['save'],
+        }
+    }
+
+    const creator = new Creator()
+    const promptModules = getPromptModules()
+    const promptAPI = new PromptModuleAPI(creator)
+    promptModules.forEach(m => m(promptAPI))
+    clearConsole()
+
+    const prompts = creator.getFinalPrompts()
+    prompts[0].choices = prompts[0].choices.map(choice => ({
+        ...choice,
+        checked: false,
+    }))
+
+    const answers = await inquirer.prompt(prompts)
+    const { saveAsDefault } = await inquirer.prompt([
+        {
+            name: 'saveAsDefault',
+            type: 'confirm',
+            message: 'Save this selection as default config?',
+            default: false,
+        },
+    ])
+    if (saveAsDefault) {
+        await fs.writeJson(DEFAULT_CONFIG_PATH, answers, { spaces: 2 })
+    }
+    return answers
+}
+
+async function detectPackageManagers() {
+    const hasNpm = await execa('npm', ['--version']).then(() => true).catch(() => false)
+    const hasYarn = await execa('yarn', ['--version']).then(() => true).catch(() => false)
+    return { npm: hasNpm, yarn: hasYarn }
+}
+
+async function selectPackageManager() {
+    const { npm, yarn } = await detectPackageManagers()
+
+    if (npm && yarn) {
+        const { pm } = await inquirer.prompt([
+            {
+                name: 'pm',
+                type: 'list',
+                message: 'Pick a package manager:',
+                choices: [
+                    { name: 'npm', value: 'npm' },
+                    { name: 'yarn', value: 'yarn' },
+                ],
+                default: 'npm',
+            },
+        ])
+        return pm
+    }
+
+    if (yarn) return 'yarn'
+    if (npm) return 'npm'
+
+    throw new Error('No package manager found (npm or yarn)')
+}
+
+async function selectRegistry(pm) {
+    const { registry } = await inquirer.prompt([
+        {
+            name: 'registry',
+            type: 'list',
+            message: `Pick ${pm} registry:`,
+            choices: [
+                { name: '官方源', value: 'https://registry.npmjs.org/' },
+                { name: '淘宝源', value: 'https://registry.npmmirror.com' },
+            ],
+            default: 'https://registry.npmjs.org/',
+        },
+    ])
+    return registry
+}
+
+async function promptAutoInstall(options, pm) {
+    if (options.skipInstall === true) return
+    const { autoInstall } = await inquirer.prompt([
+        {
+            name: 'autoInstall',
+            type: 'confirm',
+            message: `Auto install dependencies with ${pm} install?`,
+            default: true,
+        },
+    ])
+    options.skipInstall = !autoInstall
+}
+
+async function create(name, options = {}) {
+    const targetDir = path.join(process.cwd(), name)
+    const pm = await selectPackageManager()
+    const registry = await selectRegistry(pm)
+    let writeMode = 'new'
+    if (await fs.pathExists(targetDir)) {
+        const { mode } = await inquirer.prompt([
+            {
+                name: 'mode',
+                type: 'list',
+                message: `${name} already exists, what to do?`,
+                choices: [
+                    { name: 'Cancel', value: 'cancel' },
+                    { name: 'Overwrite', value: 'overwrite' },
+                    { name: 'Merge', value: 'merge' },
+                ],
+                default: 'cancel',
+            },
+        ])
+        if (mode === 'cancel') return
+        if (mode === 'overwrite') await fs.remove(targetDir)
+        writeMode = mode
+    }
+
+    const { templateSource } = await inquirer.prompt([
+        {
+            name: 'templateSource',
+            type: 'list',
+            message: 'Pick a template source:',
+            choices: [
+                { name: 'Local templates', value: 'local' },
+                { name: 'Remote git repo', value: 'remote' },
+            ],
+            default: 'local',
+        },
+    ])
+
+    if (templateSource === 'remote') {
+        const { templateKey } = await inquirer.prompt([
+            {
+                name: 'templateKey',
+                type: 'list',
+                message: 'Pick a remote template:',
+                choices: REMOTE_TEMPLATES.map(t => ({ name: t.name, value: t.name })),
+                default: REMOTE_TEMPLATES[0].name,
+            },
+        ])
+
+        let { repoUrl, repoBranch } = REMOTE_TEMPLATES.find(t => t.name === templateKey) || REMOTE_TEMPLATES[0]
+
+        if (templateKey === 'custom') {
+            const input = await inquirer.prompt([
+                {
+                    name: 'repoUrl',
+                    type: 'input',
+                    message: 'Git repo url:',
+                    validate: (v) => !!v || 'repo url is required',
+                },
+                {
+                    name: 'repoBranch',
+                    type: 'input',
+                    message: 'Branch/tag (optional):',
+                },
+            ])
+            repoUrl = input.repoUrl
+            repoBranch = input.repoBranch
+        }
+
+        const answers = await promptFeatures()
+
+        const cloneArgs = ['clone', '--depth', '1']
+        if (repoBranch) cloneArgs.push('-b', repoBranch)
+        let cloneTarget = targetDir
+        if (writeMode === 'merge') {
+            cloneTarget = await fs.mkdtemp(path.join(os.tmpdir(), 'mvc-template-'))
+        }
+        cloneArgs.push(repoUrl, cloneTarget)
+
+        logStep(1, 3, 'Downloading remote template')
+        await execa('git', cloneArgs, { stdio: 'inherit' })
+        await fs.remove(path.join(cloneTarget, '.git'))
+        if (writeMode === 'merge') {
+            await fs.copy(cloneTarget, targetDir, {
+                overwrite: false,
+                errorOnExist: false,
+                filter: (src) => !src.includes(`${path.sep}.git${path.sep}`) && !src.endsWith(`${path.sep}.git`),
+            })
+            await fs.remove(cloneTarget)
+        }
+        logSuccess('Template downloaded')
+
+        let pkg = {
+            name,
+            version: '0.1.0',
+            dependencies: {},
+            devDependencies: {},
+        }
+        const pkgPath = path.join(targetDir, 'package.json')
+        if (await fs.pathExists(pkgPath)) {
+            pkg = await fs.readJson(pkgPath)
+        }
+        pkg.name = name
+
+        const generator = new Generator(pkg, targetDir)
+        answers.features.forEach(feature => {
+            require(`./generator/${feature}`)(generator, answers)
+        })
+        await generator.generate({ overwrite: writeMode !== 'merge' })
+        logSuccess('Plugins applied')
+
+        await promptAutoInstall(options, pm)
+
+        if (!options.skipInstall) {
+            logStep(2, 3, 'Installing dependencies')
+            await executeCommand(`${pm} install --registry=${registry}`, targetDir)
+            logSuccess('Dependencies installed')
+        } else {
+            logStep(2, 3, 'Skipped dependency install')
+            logSuccess('Dependencies skipped')
+        }
+        logStep(3, 3, 'Project ready')
+        printNextSteps(name, options.skipInstall, pm, registry)
+        return
+    }
+
+    const answers = await promptFeatures()
+    await promptAutoInstall(options, pm)
+
+
+
+    // package.json 文件内容
+    const pkg = {
+        name,
+        version: '0.1.0',
+        dependencies: {},
+        devDependencies: {},
+    }
+    
+    const generator = new Generator(pkg, targetDir)
+    // 填入 vue webpack 必选项，无需用户选择
+    answers.features.unshift('vue', 'webpack')
+
+    // 根据用户选择的选项加载相应的模块，在 package.json 写入对应的依赖项
+    // 并且将对应的 template 模块渲染
+    answers.features.forEach(feature => {
+        require(`./generator/${feature}`)(generator, answers)
+    })
+
+    await generator.generate({ overwrite: writeMode !== 'merge' })
+    logSuccess('Local template generated')
+
+    if (!options.skipInstall) {
+        logStep(2, 3, 'Installing dependencies')
+        await executeCommand(`${pm} install --registry=${registry}`, targetDir)
+        logSuccess('Dependencies installed')
+    } else {
+        logStep(2, 3, 'Skipped dependency install')
+        logSuccess('Dependencies skipped')
+    }
+    logStep(3, 3, 'Project ready')
+    printNextSteps(name, options.skipInstall, pm, registry)
+}
+
+function getPromptModules() {
+    return [
+        'babel',
+        'router',
+        'vuex',
+        'linter',
+    ].map(file => require(`./promptModules/${file}`))
+}
+
+module.exports = create

package/lib/generator/babel/index.js

@@ -0,0 +1,15 @@
+module.exports = (generator) => {
+    generator.extendPackage({
+        babel: {
+            presets: ['@babel/preset-env'],
+        },
+        dependencies: {
+            'core-js': '^3.8.3',
+        },
+        devDependencies: {
+            '@babel/core': '^7.12.13',
+            '@babel/preset-env': '^7.12.13',
+            'babel-loader': '^8.2.2',
+        },
+    })
+}

package/lib/generator/linter/index.js

@@ -0,0 +1,55 @@
+const map = {
+    airbnb: {
+        'eslint-config-airbnb-base': '^14.2.1',
+        'eslint-plugin-import': '^2.22.1',
+    },
+    standard: {
+        'eslint-config-standard': '^16.0.2',
+        'eslint-plugin-import': '^2.22.1',
+        'eslint-plugin-node': '^11.1.0',
+        'eslint-plugin-promise': '^4.3.1',
+    },
+}
+
+module.exports = (generator, { lintOn, eslintConfig }) => {
+    generator.render('./template', {
+        hasAirbnb: eslintConfig == 'airbnb',
+    })
+
+    generator.extendPackage({
+        scripts: {
+            lint: 'eslint --ext .js,.jsx,.vue src/',
+        },
+        devDependencies: {
+            'babel-eslint': '^10.1.0',
+            eslint: '^7.20.0',
+            'eslint-plugin-vue': '^7.6.0',
+            ...map[eslintConfig],
+        },
+    })
+
+    if (lintOn.includes('commit')) {
+        generator.extendPackage({
+            devDependencies: {
+                husky: '^5.0.9',
+                'lint-staged': '^10.5.4',
+            },
+            husky: {
+                hooks: {
+                    'pre-commit': 'lint-staged',
+                },
+            },
+            'lint-staged': {
+                'src/**/*.{js,jsx,vue}': 'eslint --fix',
+            },
+        })
+    }
+
+    if (lintOn.includes('save')) {
+        generator.extendPackage({
+            devDependencies: {
+                'eslint-loader': '^4.0.2',
+            },
+        })
+    }
+}

package/lib/generator/linter/template/.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+    root: true,
+    parserOptions: {
+        ecmaVersion: 2019,
+        parser: 'babel-eslint',
+    },
+    env: {
+        browser: true,
+        node: true,
+    },
+    extends: [
+        'plugin:vue/essential',
+        <%_ if (hasAirbnb) { _%>
+        'airbnb-base',
+        <%_ } else { _%>
+        'standard',
+        <%_ } _%>
+    ],
+    rules: {
+        'no-console': 'off',
+        'array-element-newline': ['error', 'consistent'],
+        indent: ['error', 4, { MemberExpression: 0, SwitchCase: 1 }],
+        quotes: ['error', 'single', { allowTemplateLiterals: true }],
+        'linebreak-style': 'off',
+        semi: ['error', 'never'],
+        'comma-dangle': 'off',
+        'import/no-unresolved': 'off',
+        'eol-last': 'off',
+    },
+}

package/lib/generator/router/index.js

@@ -0,0 +1,17 @@
+module.exports = (generator, options = {}) => {
+    generator.injectImports(generator.entryFile, `import router from './router'`)
+
+    generator.injectRootOptions(generator.entryFile, `router`)
+
+    generator.extendPackage({
+        dependencies: {
+            'vue-router': '^3.5.1',
+        },
+    })
+
+    generator.render('./template', {
+        historyMode: options.historyMode,
+        hasTypeScript: false,
+        plugins: [],
+    })
+}

package/lib/generator/router/template/src/App.vue

@@ -0,0 +1,33 @@
+<template>
+    <div id="app">
+        <div id="nav">
+            <router-link to="/">Home</router-link> |
+            <router-link to="/about">About</router-link>
+        </div>
+        <router-view />
+    </div>
+</template>
+
+<style>
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+
+#nav {
+    padding: 30px;
+}
+
+#nav a {
+    font-weight: bold;
+    color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+    color: #42b983;
+}
+</style>

package/lib/generator/router/template/src/router/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: Home
+    },
+    {
+        path: '/about',
+        name: 'About',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    }
+]
+
+const router = new VueRouter({
+    <%_ if (historyMode) { _%>
+    mode: 'history',
+    <%_ } _%>
+    routes
+})
+
+export default router

package/lib/generator/router/template/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="about">
+        <h1>This is an about page</h1>
+    </div>
+</template>

package/lib/generator/router/template/src/views/Home.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="home">
+        <img alt="Vue logo" src="../assets/logo.png" />
+        <HelloWorld msg="Welcome to Your Vue.js App" />
+    </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+    name: 'Home',
+    components: {
+        HelloWorld
+    }
+}
+</script>

package/lib/generator/vue/index.js

@@ -0,0 +1,20 @@
+module.exports = (generator) => {
+    generator.render('./template')
+
+    generator.extendPackage({
+        dependencies: {
+            vue: '^2.6.12',
+        },
+        devDependencies: {
+            'vue-template-compiler': '^2.6.12',
+        },
+    })
+
+    generator.extendPackage({
+        browserslist: [
+            '> 1%',
+            'last 2 versions',
+            'not dead',
+        ],
+    })
+}

package/lib/generator/vue/template/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>
+        <%%= htmlWebpackPlugin.options.title %%>
+    </title>
+</head>
+<body>
+    <noscript>
+        <strong>We're sorry but <%%= htmlWebpackPlugin.options.title %%> doesn't work properly without JavaScript
+                enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+</body>
+</html>

package/lib/generator/vue/template/src/App.vue

@@ -0,0 +1,29 @@
+<template>
+    <div id="app">
+        <img alt="Vue logo" src="./assets/logo.png" />
+        <HelloWorld msg="Welcome to Your Vue.js App" />
+        <h1>Welcome to Your Vue.js App</h1>
+    </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+    name: 'App',
+    components: {
+        HelloWorld
+    }
+}
+</script>
+
+<style>
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+</style>