zoro-cli/src/plugins/config-base/prompts.js

https://github.com/vuejs/vue-cli

module.exports = ({ api, rootOptions, Types }) => {
  const { mobile, pc, weblib, nodelib, node, ui } = Types

  const isWeblib = ({ type }) => type === weblib
  const isWebOrWeblib = ({ type }) =>
    type === mobile || type === pc || type === weblib

  api.injectTypes([
    { name: 'web mobile 项目', value: mobile },
    { name: 'web pc 项目', value: pc },
    { name: 'web npm library (rollup)', value: weblib },
    { name: 'node npm library', value: nodelib },
    { name: 'node 项目 (koa/egg/chair 等)', value: node },
  ])

  let defaultUI
  if (rootOptions.ui === false) {
    defaultUI = false
  } else {
    defaultUI = isWeblib ? false : ui[0]
  }

  return [
    {
      type: 'list',
      name: 'ui',
      message: '选择前端框架',
      default: defaultUI,
      when: isWebOrWeblib,
      choices: () => {
        const no = {
          name: '不需要',
          value: false,
        }
        return [no, ...ui]
      },
    },
    {
      type: 'list',
      name: 'bundler',
      message: '请选择打包工具',
      default: rootOptions.bundler,
      when: isWeblib,
      choices: [{ value: 'rollup' }, { value: 'webpack' }],
    },
    {
      name: 'cssPreprocessor',
      type: 'list',
      message: 'Pick a CSS pre-processor',
      default: rootOptions.cssPreprocessor,
      when: isWebOrWeblib,
      choices: ({ type }) => {
        const no = {
          name: '不需要',
          value: false,
        }
        const cssPreprocessors = [
          {
            name: 'PostCSS',
            value: 'postcss',
          },
          {
            name: 'SCSS/SASS',
            value: 'sass',
          },
          {
            name: 'LESS',
            value: 'less',
          },
          {
            name: 'Stylus',
            value: 'stylus',
          },
        ]
        return isWeblib({ type }) ? [no, ...cssPreprocessors] : cssPreprocessors
      },
    },
    {
      name: 'rem',
      type: 'list',
      message: '是否要开启自动将 px 转 rem 的功能',
      default: !!rootOptions.rem,
      // 只要有 cssPreprocessor, 那么就询问是否需要转 rem
      when: ({ cssPreprocessor }) => !!cssPreprocessor,
      choices: [
        {
          name: '不开启',
          value: false,
        },
        {
          name: '开启, 请查阅生成的 postcss.config.js',
          value: true,
        },
      ],
    },
  ]
}