新款vue-cli之create-vue源码阅读总结

npm init vue@3

# 其实背后的逻辑是npm做了个转换:
# 参见：
# https://docs.npmjs.com/cli/v6/commands/npm-init
# https://juejin.cn/post/6948202986573135908

#即等效于
# npx create-vue@3

cd create-vue
npm run build # 将index.js转成commonjs形式，输出outfile.cjs
node outfile.cjs

{
  "bin": {
    "create-vue": "outfile.cjs"
  },
}

// demo.js
import path from 'path';

consoloe.log(path)

node demo.js

# 如果没有type: 'module'配置，需要转成demo.cjs

// 思路：简洁 清晰 易懂
const templateRoot = path.resolve(__dirname, 'template')
const render = function render(templateName) {
  const templateDir = path.resolve(templateRoot, templateName)
  renderTemplate(templateDir, root) // utils\renderTemplate.js
}

// 首先拉取template/base作为初始化模板
render('base')

// 比如这里用户选择了jsx，则拉取template/config/jsx
// 然后renderTemplate函数去做merge即可
if (needsJsx) {
  render('config/jsx')
}
// ...

// --default
 // --typescript / --ts
 // --jsx
 // --router / --vue-router
 // --pinia
 // --with-tests / --tests (equals to `--vitest --cypress`)
 // --vitest
 // --cypress
 // --eslint
 // --eslint-with-prettier (only support prettier through eslint for simplicity)
 // --force (for force overwriting)

npx create-vue@3 --ts

# 不过 npm init vue@3 --ts 居然没有生效，不知道作者是不是没有测试

// generated by the following code:
//
// require('gradient-string')([
//   { color: '#42d392', pos: 0 },
//   { color: '#42d392', pos: 0.1 },
//   { color: '#647eff', pos: 1 }
// ])('Vue.js - The Progressive JavaScript Framework'))
//
// Use the output directly here to keep the bundle small.

const banner =
  '\x1B[38;2;66;211;146mV\x1B[39m\x1B[38;2;66;...'

export default banner

# 源码根目录下
git submodule init
git submodule update

#!/usr/bin/env zx
import 'zx/globals'

$.verbose = false

const featureFlags = ['typescript', 'jsx', 'router', 'pinia', 'vitest', 'cypress']

// The following code & comments are generated by GitHub CoPilot.
function fullCombination(arr) {
  // ...

  return combinations
}

const flagCombinations = fullCombination(featureFlags)
flagCombinations.push(['default'])

// `--with-tests` are equivalent of `--vitest --cypress`
// Previously it means `--cypress` without `--vitest`.
// Here we generate the snapshots only for the sake of easier comparison with older templates.
// They may be removed in later releases.
const withTestsFlags = fullCombination(['typescript', 'jsx', 'router', 'pinia']).map((args) => [
  ...args,
  'with-tests'
])
withTestsFlags.push(['with-tests'])

flagCombinations.push(...withTestsFlags)

const playgroundDir = path.resolve(__dirname, '../playground/')
const bin = path.posix.relative('../playground/', '../outfile.cjs')

cd(playgroundDir)
for (const flags of flagCombinations) {
  const projectName = flags.join('-')
  console.log(`Creating project ${projectName}`)

  await $`node ${[bin, projectName, ...flags.map((flag) => `--${flag}`), '--force']}`
}