如何将“argv.typescript”传递给“create-vue”

Question

我使用以下命令安装了

create-vue

：

npm install create-vue

然后，使用此命令行创建项目：

# create-vue "my-project"

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /tmp/vue/my-project...

Done. Now run:

  cd my-project
  npm install
  npm run dev

我只能通过“

my-project

”，然后按“Enter”，“Enter”，....，“Enter”，（

default

是

No

），我想做

typescript

选项到“

YES

”，但我不知道如何将“

argv.typescript

”传递到命令行：

# create-vue "my-project" --typescript --jsx ...

以上选项不起作用。

然后，我从“

script

”中找到了以下

create-vue

（双击bin文件）：

async function init() {
  console.log();
  console.log(
    process.stdout.isTTY && process.stdout.getColorDepth() > 8 ? gradientBanner : defaultBanner
  );
  console.log();
  const cwd = process.cwd();
  const args = process.argv.slice(2);
  const options2 = {
    typescript: { type: "boolean" },
    ts: { type: "boolean" },
    "with-tests": { type: "boolean" },
    tests: { type: "boolean" },
    "vue-router": { type: "boolean" },
    router: { type: "boolean" },
    "vue-devtools": { type: "boolean" },
    devtools: { type: "boolean" }
  };
  const { values: argv, positionals } = (0, import_node_util.parseArgs)({
    args,
    options: options2,
    strict: false
  });
  const isFeatureFlagsUsed = typeof (argv.default ?? (argv.ts || argv.typescript) ?? argv.jsx ?? (argv.router || argv["vue-router"]) ?? argv.pinia ?? (argv.tests || argv["with-tests"]) ?? argv.vitest ?? argv.cypress ?? argv.nightwatch ?? argv.playwright ?? argv.eslint ?? argv["eslint-with-prettier"] ?? (argv.devtools || argv["vue-devtools"])) === "boolean";
  let targetDir = positionals[0];
  const defaultProjectName = !targetDir ? "vue-project" : targetDir;
  const forceOverwrite = argv.force;
  const language = getLanguage();
  let result = {};
  try {
    result = await (0, import_prompts.default)(
      [
        {
          name: "projectName",
          type: targetDir ? null : "text",
          message: language.projectName.message,
          initial: defaultProjectName,
          onState: (state) => targetDir = String(state.value).trim() || defaultProjectName
        },
        {
          name: "shouldOverwrite",
          type: () => canSkipEmptying(targetDir) || forceOverwrite ? null : "toggle",
          message: () => {
            const dirForPrompt = targetDir === "." ? language.shouldOverwrite.dirForPrompts.current : `${language.shouldOverwrite.dirForPrompts.target} "${targetDir}"`;
            return `${dirForPrompt} ${language.shouldOverwrite.message}`;
          },
          initial: true,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "overwriteChecker",
          type: (prev, values) => {
            if (values.shouldOverwrite === false) {
              throw new Error(red("\u2716") + ` ${language.errors.operationCancelled}`);
            }
            return null;
          }
        },
        {
          name: "packageName",
          type: () => isValidPackageName(targetDir) ? null : "text",
          message: language.packageName.message,
          initial: () => toValidPackageName(targetDir),
          validate: (dir) => isValidPackageName(dir) || language.packageName.invalidMessage
        },
        {
          name: "needsTypeScript",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsTypeScript.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsJsx",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsJsx.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsRouter",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsRouter.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsPinia",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsPinia.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsVitest",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsVitest.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsE2eTesting",
          type: () => isFeatureFlagsUsed ? null : "select",
          hint: language.needsE2eTesting.hint,
          message: language.needsE2eTesting.message,
          initial: 0,
          choices: (prev, answers) => [
            {
              title: language.needsE2eTesting.selectOptions.negative.title,
              value: false
            },
            {
              title: language.needsE2eTesting.selectOptions.cypress.title,
              description: answers.needsVitest ? void 0 : language.needsE2eTesting.selectOptions.cypress.desc,
              value: "cypress"
            },
            {
              title: language.needsE2eTesting.selectOptions.nightwatch.title,
              description: answers.needsVitest ? void 0 : language.needsE2eTesting.selectOptions.nightwatch.desc,
              value: "nightwatch"
            },
            {
              title: language.needsE2eTesting.selectOptions.playwright.title,
              value: "playwright"
            }
          ]
        },
        {
          name: "needsEslint",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsEslint.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsPrettier",
          type: (prev, values) => {
            if (isFeatureFlagsUsed || !values.needsEslint) {
              return null;
            }
            return "toggle";
          },
          message: language.needsPrettier.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        },
        {
          name: "needsDevTools",
          type: () => isFeatureFlagsUsed ? null : "toggle",
          message: language.needsDevTools.message,
          initial: false,
          active: language.defaultToggleOptions.active,
          inactive: language.defaultToggleOptions.inactive
        }
      ],
      {
        onCancel: () => {
          throw new Error(red("\u2716") + ` ${language.errors.operationCancelled}`);
        }
      }
    );
  } catch (cancelled) {
    console.log(cancelled.message);
    process.exit(1);
  }
  const {
    projectName,
    packageName = projectName ?? defaultProjectName,
    shouldOverwrite = argv.force,
    needsJsx = argv.jsx,
    needsTypeScript = argv.ts || argv.typescript,
    needsRouter = argv.router || argv["vue-router"],
    needsPinia = argv.pinia,
    needsVitest = argv.vitest || argv.tests,
    needsEslint = argv.eslint || argv["eslint-with-prettier"],
    needsPrettier = argv["eslint-with-prettier"],
    needsDevTools = argv.devtools || argv["vue-devtools"]
  } = result;

关键是：

  const isFeatureFlagsUsed = typeof (argv.default ?? (argv.ts || argv.typescript) ?? argv.jsx ?? (argv.router || argv["vue-router"]) ?? argv.pinia ?? (argv.tests || argv["with-tests"]) ?? argv.vitest ?? argv.cypress ?? argv.nightwatch ?? argv.playwright ?? argv.eslint ?? argv["eslint-with-prettier"] ?? (argv.devtools || argv["vue-devtools"])) === "boolean";

“

isFeatureFlagsUsed

”用于

show

或

hide

选项，但如何从

(argv.ts || argv.typescript)

设置

command line

呢？

Answer 1

要从命令行设置 argv.ts 或 argv.typescript 标志，您需要在运行 create-vue 命令时传递 --ts 或 --typescript 作为参数。

具体操作方法如下：

create-vue "my-project" --typescript

或

create-vue "my-project" --ts

这些命令中的任何一个都应该为您的 Vue 项目启用 TypeScript 支持。