@weig_3078/cli-demo 0.1.0

package/lib/generator/vue/template/src/components/HelloWorld.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="hello">
+        <h1>{{ msg }}</h1>
+        <p>
+            For a guide and recipes on how to configure / customize this
+            project,<br />
+            check out the
+            <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+                >vue-cli documentation</a
+            >.
+        </p>
+        <h3>Essential Links</h3>
+        <ul>
+            <li>
+                <a href="https://vuejs.org" target="_blank" rel="noopener"
+                    >Core Docs</a
+                >
+            </li>
+            <li>
+                <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+                    >Forum</a
+                >
+            </li>
+            <li>
+                <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+                    >Community Chat</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://twitter.com/vuejs"
+                    target="_blank"
+                    rel="noopener"
+                    >Twitter</a
+                >
+            </li>
+            <li>
+                <a href="https://news.vuejs.org" target="_blank" rel="noopener"
+                    >News</a
+                >
+            </li>
+        </ul>
+        <h3>Ecosystem</h3>
+        <ul>
+            <li>
+                <a
+                    href="https://router.vuejs.org"
+                    target="_blank"
+                    rel="noopener"
+                    >vue-router</a
+                >
+            </li>
+            <li>
+                <a href="https://vuex.vuejs.org" target="_blank" rel="noopener"
+                    >vuex</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-devtools#vue-devtools"
+                    target="_blank"
+                    rel="noopener"
+                    >vue-devtools</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://vue-loader.vuejs.org"
+                    target="_blank"
+                    rel="noopener"
+                    >vue-loader</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/awesome-vue"
+                    target="_blank"
+                    rel="noopener"
+                    >awesome-vue</a
+                >
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'HelloWorld',
+    props: {
+        msg: String
+    }
+}
+</script>
+
+<style scoped>
+h3 {
+    margin: 40px 0 0;
+}
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    display: inline-block;
+    margin: 0 10px;
+}
+a {
+    color: #42b983;
+}
+</style>

package/lib/generator/vue/template/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+    render: (h) => h(App),
+}).$mount('#app')

package/lib/generator/vuex/index.js

@@ -0,0 +1,13 @@
+module.exports = (generator) => {
+    generator.injectImports(generator.entryFile, `import store from './store'`)
+
+    generator.injectRootOptions(generator.entryFile, `store`)
+
+    generator.extendPackage({
+        dependencies: {
+            vuex: '^3.6.2',
+        },
+    })
+
+    generator.render('./template', {})
+}

package/lib/generator/vuex/template/src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+    },
+    mutations: {
+    },
+    actions: {
+    },
+    modules: {
+    },
+})

package/lib/generator/webpack/index.js

@@ -0,0 +1,27 @@
+module.exports = (generator, options = {}) => {
+    generator.extendPackage({
+        scripts: {
+            dev: 'webpack-dev-server --config ./build/dev.config.js',
+            build: 'webpack --config ./build/pro.config.js',
+        },
+        devDependencies: {
+            'clean-webpack-plugin': '^3.0.0',
+            'css-loader': '^5.0.2',
+            'file-loader': '^6.2.0',
+            'url-loader': '^4.1.1',
+            'html-webpack-plugin': '^4.5.1',
+            'style-loader': '^2.0.0',
+            'vue-loader': '^15.9.6',
+            webpack: '^4.32.2',
+            'webpack-cli': '^3.3.11',
+            'webpack-dev-server': '^3.11.2',
+            'webpack-merge': '^4.2.1',
+            webpackbar: '^4.0.0',
+        },
+    })
+
+    generator.render('./template', {
+        hasBabel: options.features.includes('babel'),
+        lintOnSave: options.lintOn.includes('save'),
+    })
+}

package/lib/generator/webpack/template/build/base.config.js

@@ -0,0 +1,68 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const WebpackBar = require('webpackbar')
+
+const resolve = (filePath) => path.resolve(__dirname, filePath)
+
+module.exports = {
+    entry: resolve('../src/main.js'),
+    resolve: {
+        extensions: ['.js', '.vue', '.json', '.css'],
+        alias: {
+            '@': resolve('../src'),
+        },
+    },
+    module: {
+        rules: [
+            <%_ if (lintOnSave) { _%>
+            {
+                enforce: 'pre',
+                test: /\.(js|vue)$/,
+                loader: 'eslint-loader',
+                exclude: /node_modules/
+            },
+            <%_ } _%>
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                exclude: /node_modules/,
+            },
+            <%_ if (hasBabel) { _%>
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+            },
+            <%_ } _%>
+            {
+                test: /\.(png|svg|jpg|gif|ico)$/,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        esModule: false,
+                    },
+                }],
+            },
+            {
+                test: /\.(woff|eot|ttf)\??.*$/,
+                loader: 'url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]',
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+            },
+        ],
+    },
+    plugins: [
+        new WebpackBar(),
+        new VueLoaderPlugin(),
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            title: 'My App',
+            template: resolve('../public/index.html'),
+            favicon: resolve('../public/favicon.ico'),
+        }),
+    ],
+}

package/lib/generator/webpack/template/build/dev.config.js

@@ -0,0 +1,19 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const base = require('./base.config')
+
+const resolve = (filePath) => path.resolve(__dirname, filePath)
+
+module.exports = merge(base, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    devServer: {
+        contentBase: resolve('../dist'),
+        hot: true,
+        port: 8080,
+    },
+    output: {
+        filename: '[name].bundle.js',
+        path: resolve('../dist'),
+    },
+})

package/lib/generator/webpack/template/build/pro.config.js

@@ -0,0 +1,16 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const base = require('./base.config')
+
+const resolve = (filePath) => path.resolve(__dirname, filePath)
+
+module.exports = merge(base, {
+    mode: 'production',
+    devtool: 'source-map',
+    output: {
+        path: resolve('../dist'),
+        publicPath: './',
+        filename: '[name].[contenthash].js',
+        chunkFilename: '[name].[contenthash].js',
+    },
+})

package/lib/promptModules/babel.js

@@ -0,0 +1,10 @@
+module.exports = (api) => {
+    api.injectFeature({
+        name: 'Babel',
+        value: 'babel',
+        short: 'Babel',
+        description: 'Transpile modern JavaScript to older versions (for compatibility)',
+        link: 'https://babeljs.io/',
+        checked: true,
+    })
+}

package/lib/promptModules/linter.js

@@ -0,0 +1,48 @@
+module.exports = (api) => {
+    api.injectFeature({
+        name: 'Linter / Formatter',
+        value: 'linter',
+        short: 'Linter',
+        description: 'Check and enforce code quality with ESLint or Prettier',
+        link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint',
+        checked: true,
+    })
+    
+    api.injectPrompt({
+        name: 'eslintConfig',
+        when: answers => answers.features.includes('linter'),
+        type: 'list',
+        message: 'Pick a linter / formatter config:',
+        description: 'Checking code errors and enforcing an homogeoneous code style is recommended.',
+        choices: () => [
+            {
+                name: 'ESLint + Airbnb config',
+                value: 'airbnb',
+                short: 'Airbnb',
+            },
+            {
+                name: 'ESLint + Standard config',
+                value: 'standard',
+                short: 'Standard',
+            },
+        ],
+    })
+      
+    api.injectPrompt({
+        name: 'lintOn',
+        message: 'Pick additional lint features:',
+        when: answers => answers.features.includes('linter'),
+        type: 'checkbox',
+        choices: [
+            {
+                name: 'Lint on save',
+                value: 'save',
+                checked: true,
+            },
+            {
+                name: 'Lint and fix on commit',
+                value: 'commit',
+            },
+        ],
+    })
+}

package/lib/promptModules/router.js

@@ -0,0 +1,19 @@
+const chalk = require('chalk')
+
+module.exports = (api) => {
+    api.injectFeature({
+        name: 'Router',
+        value: 'router',
+        description: 'Structure the app with dynamic pages',
+        link: 'https://router.vuejs.org/',
+    })
+
+    api.injectPrompt({
+        name: 'historyMode',
+        when: answers => answers.features.includes('router'),
+        type: 'confirm',
+        message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
+        description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`,
+        link: 'https://router.vuejs.org/guide/essentials/history-mode.html',
+    })
+}

package/lib/promptModules/vuex.js

@@ -0,0 +1,8 @@
+module.exports = (api) => {
+    api.injectFeature({
+        name: 'Vuex',
+        value: 'vuex',
+        description: 'Manage the app state with a centralized store',
+        link: 'https://vuex.vuejs.org/',
+    })
+}

package/lib/utils/clearConsole.js

@@ -0,0 +1,13 @@
+const readline = require('readline')
+// 清空控制台
+module.exports = function clearConsole(title) {
+    if (process.stdout.isTTY) {
+        const blank = '\n'.repeat(process.stdout.rows)
+        console.log(blank)
+        readline.cursorTo(process.stdout, 0, 0)
+        readline.clearScreenDown(process.stdout)
+        if (title) {
+            console.log(title)
+        }
+    }
+}

package/lib/utils/codemods/injectImports.js

@@ -0,0 +1,31 @@
+// https://github.com/facebook/jscodeshift
+// 对代码进行解析得到 AST，再将参数 imports 中的语句插入
+module.exports = function injectImports(fileInfo, api, { imports }) {
+    const j = api.jscodeshift
+    const root = j(fileInfo.source)
+
+    const toImportAST = i => j(`${i}\n`).nodes()[0].program.body[0]
+    const toImportHash = node => JSON.stringify({
+        specifiers: node.specifiers.map(s => s.local.name),
+        source: node.source.raw,
+    })
+
+    const declarations = root.find(j.ImportDeclaration)
+    const importSet = new Set(declarations.nodes().map(toImportHash))
+    const nonDuplicates = node => !importSet.has(toImportHash(node))
+
+    const importASTNodes = imports.map(toImportAST).filter(nonDuplicates)
+
+    if (declarations.length) {
+        declarations
+        .at(-1)
+        // a tricky way to avoid blank line after the previous import
+        .forEach(({ node }) => delete node.loc)
+        .insertAfter(importASTNodes)
+    } else {
+        // no pre-existing import declarations
+        root.get().node.program.body.unshift(...importASTNodes)
+    }
+
+    return root.toSource()
+}

package/lib/utils/codemods/injectOptions.js

@@ -0,0 +1,27 @@
+// https://github.com/facebook/jscodeshift
+// 对代码进行解析得到 AST，再将参数 injections 中的语句插入
+module.exports = function injectOptions(fileInfo, api, { injections }) {
+    const j = api.jscodeshift
+    const root = j(fileInfo.source)
+
+    const toPropertyAST = i => j(`({${i}})`).nodes()[0].program.body[0].expression.properties[0]
+
+    const properties = root
+    .find(j.NewExpression, {
+        callee: { name: 'Vue' },
+        arguments: [{ type: 'ObjectExpression' }],
+    })
+    .map(path => path.get('arguments', 0))
+    .get()
+    .node
+    .properties
+
+    const toPropertyHash = p => `${p.key.name}: ${j(p.value).toSource()}`
+    const propertySet = new Set(properties.map(toPropertyHash))
+    const nonDuplicates = p => !propertySet.has(toPropertyHash(p))
+
+    // inject at index length - 1 as it's usually the render fn
+    properties.splice(-1, 0, ...injections.map(toPropertyAST).filter(nonDuplicates))
+
+    return root.toSource()
+}

package/lib/utils/configTransforms.js

@@ -0,0 +1,49 @@
+const stringifyJS = require('./stringifyJS')
+const merge = require('deepmerge')
+
+const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
+const mergeOptions = {
+    arrayMerge: mergeArrayWithDedupe,
+}
+
+const transformJS = {
+    read: ({ filename, context }) => {
+        try {
+            return require(`./${filename}`, context, true)
+        } catch (e) {
+            return null
+        }
+    },
+    write: ({ value }) => `module.exports = ${stringifyJS(value, null, 4)}`,
+}
+
+const transformJSON = {
+    read: ({ source }) => JSON.parse(source),
+    write: ({ value, existing }) => JSON.stringify(merge(existing, value, mergeOptions), null, 4),
+}
+
+const transformYAML = {
+    read: ({ source }) => require('js-yaml').safeLoad(source),
+    write: ({ value, existing }) => require('js-yaml').safeDump(merge(existing, value, mergeOptions), {
+        skipInvalid: true,
+    }),
+}
+
+const transformLines = {
+    read: ({ source }) => source.split('\n'),
+    write: ({ value, existing }) => {
+        if (existing) {
+            value = existing.concat(value)
+            // Dedupe
+            value = value.filter((item, index) => value.indexOf(item) === index)
+        }
+        return value.join('\n')
+    },
+}
+
+module.exports = {
+    js: transformJS,
+    json: transformJSON,
+    yaml: transformYAML,
+    lines: transformLines,
+}

package/lib/utils/executeCommand.js

@@ -0,0 +1,33 @@
+const execa = require('execa')
+module.exports = function executeCommand(command, cwd) {
+    return new Promise((resolve, reject) => {
+        const child = execa.command(command, {
+            cwd,
+            /* 
+                三个选项分别对应：
+               stdin = 'inherit'： 子进程直接用用户的输入
+               stdout = 'pipe'：把子进程的正常输出“接到一根管子里”给 Node 程序
+               stderr = 'inherit'：子进程的错误输出直接显示到当前终端
+                不用你自己监听 child.stderr，报错会直接出现在屏幕上
+            */
+            stdio: ['inherit', 'pipe', 'inherit'],
+        })
+
+        child.stdout.on('data', buffer => {
+            process.stdout.write(buffer)
+        })
+
+        child.on('close', code => {
+            /* 
+                子进程结束时触发 
+                code是退出码：一般0 表示成功，非0表示失败
+            */
+            if (code !== 0) {
+                reject(new Error(`command failed: ${command}`))
+                return
+            }
+
+            resolve()
+        })
+    })
+}

package/lib/utils/normalizeFilePaths.js

@@ -0,0 +1,11 @@
+module.exports = function normalizeFilePaths(files) {
+    Object.keys(files).forEach(file => {
+        const normalized = file.replace(/\\/g, '/')
+        if (file !== normalized) {
+            files[normalized] = files[file]
+            delete files[file]
+        }
+    })
+    
+    return files
+}

package/lib/utils/sortObject.js

@@ -0,0 +1,32 @@
+/**
+ * 对对象 key 排序并返回新对象。
+ * - 先按 keyOrder 指定的顺序放置（若存在）
+ * - 剩余 key 默认按 Unicode 字典序排序（可关闭）
+ *
+ * @param {Record<string, any>} obj 要排序的对象（会被 delete 已提取的 key）
+ * @param {string[]} [keyOrder] 优先排序的 key 列表
+ * @param {boolean} [dontSortByUnicode] 为 true 时不对剩余 key 做 keys.sort()
+ * @returns {Record<string, any> | undefined} 排序后的新对象；obj 为空时返回 undefined
+ */
+module.exports = function sortObject(obj, keyOrder, dontSortByUnicode) {
+    if (!obj) return
+    const res = {}
+
+    if (keyOrder) {
+        keyOrder.forEach(key => {
+            if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                res[key] = obj[key]
+                delete obj[key]
+            }
+        })
+    }
+
+    const keys = Object.keys(obj)
+
+    !dontSortByUnicode && keys.sort()
+    keys.forEach(key => {
+        res[key] = obj[key]
+    })
+
+    return res
+}

package/lib/utils/stringifyJS.js

@@ -0,0 +1,12 @@
+// 递归的序列化代码
+module.exports = function stringifyJS(value) {
+    const { stringify } = require('javascript-stringify')
+    // eslint-disable-next-line no-shadow
+    return stringify(value, (val, indent, stringify) => {
+        if (val && val.__expression) {
+            return val.__expression
+        }
+        
+        return stringify(val)
+    }, 4)
+}

package/lib/utils/writeFileTree.js

@@ -0,0 +1,12 @@
+const fs = require('fs-extra')
+const path = require('path')
+
+module.exports = async function writeFileTree(dir, files, options = {}) {
+    const { overwrite = true } = options
+    Object.keys(files).forEach((name) => {
+        const filePath = path.join(dir, name)
+        fs.ensureDirSync(path.dirname(filePath))
+        if (!overwrite && name !== 'package.json' && fs.existsSync(filePath)) return
+        fs.writeFileSync(filePath, files[name])
+    })
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@weig_3078/cli-demo",
+  "version": "0.1.0",
+  "description": "脚手架 demo",
+  "private": false,
+  "main": "index.js",
+  "bin": {
+    "mvc": "./dist/mvc.js"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.cjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weige3078/cli-demo.git"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "node scripts/verify-commit.js"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^7.0.0",
+    "download-git-repo": "^3.0.2",
+    "ejs": "^3.1.6",
+    "execa": "^5.0.0",
+    "fs-extra": "^9.1.0",
+    "globby": "^11.0.2",
+    "inquirer": "^7.3.3",
+    "isbinaryfile": "^4.0.6",
+    "javascript-stringify": "^2.0.1",
+    "js-yaml": "^4.1.0",
+    "readline": "^1.3.0",
+    "recast": "^0.20.4",
+    "vue-codemod": "0.0.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "deepmerge": "^4.3.1",
+    "eslint": "^7.20.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "husky": "^4.3.0",
+    "rollup": "^4.60.0"
+  }
+}