zqy233的前端学习笔记

主题

回到顶部
索引

banners

使用gradient-string库生成控制台渐变输出文字

ts
const defaultBanner =
  'electron-vite-template : a vue3-vite-electron project template composed of Vite and rollup'

// 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 gradientBanner =
  '\u001b[38;2;66;211;146me\u001b[39m\u001b[38;2;66;211;146ml\u001b[39m\u001b[38;2;66;211;146me\u001b[39m\u001b[38;2;66;211;146mc\u001b[39m\u001b[38;2;66;211;146mt\u001b[39m\u001b[38;2;66;211;146mr\u001b[39m\u001b[38;2;66;211;146mo\u001b[39m\u001b[38;2;66;211;146mn\u001b[39m\u001b[38;2;66;211;146m-\u001b[39m\u001b[38;2;66;210;148mv\u001b[39m\u001b[38;2;67;209;149mi\u001b[39m\u001b[38;2;67;207;151mt\u001b[39m\u001b[38;2;68;206;152me\u001b[39m\u001b[38;2;68;205;154m-\u001b[39m\u001b[38;2;69;204;155mt\u001b[39m\u001b[38;2;69;203;157me\u001b[39m\u001b[38;2;70;201;158mm\u001b[39m\u001b[38;2;70;200;160mp\u001b[39m\u001b[38;2;71;199;161ml\u001b[39m\u001b[38;2;71;198;163ma\u001b[39m\u001b[38;2;72;197;164mt\u001b[39m\u001b[38;2;72;195;166me\u001b[39m \u001b[38;2;73;194;167m:\u001b[39m \u001b[38;2;73;193;169ma\u001b[39m \u001b[38;2;74;192;171mv\u001b[39m\u001b[38;2;74;191;172mu\u001b[39m\u001b[38;2;75;189;174me\u001b[39m\u001b[38;2;75;188;175m3\u001b[39m\u001b[38;2;76;187;177m-\u001b[39m\u001b[38;2;76;186;178mv\u001b[39m\u001b[38;2;77;185;180mi\u001b[39m\u001b[38;2;77;183;181mt\u001b[39m\u001b[38;2;77;182;183me\u001b[39m\u001b[38;2;78;181;184m-\u001b[39m\u001b[38;2;78;180;186me\u001b[39m\u001b[38;2;79;179;187ml\u001b[39m\u001b[38;2;79;177;189me\u001b[39m\u001b[38;2;80;176;191mc\u001b[39m\u001b[38;2;80;175;192mt\u001b[39m\u001b[38;2;81;174;194mr\u001b[39m\u001b[38;2;81;173;195mo\u001b[39m\u001b[38;2;82;171;197mn\u001b[39m \u001b[38;2;82;170;198mp\u001b[39m\u001b[38;2;83;169;200mr\u001b[39m\u001b[38;2;83;168;201mo\u001b[39m\u001b[38;2;84;167;203mj\u001b[39m\u001b[38;2;84;166;204me\u001b[39m\u001b[38;2;85;164;206mc\u001b[39m\u001b[38;2;85;163;207mt\u001b[39m \u001b[38;2;86;162;209mt\u001b[39m\u001b[38;2;86;161;210me\u001b[39m\u001b[38;2;87;160;212mm\u001b[39m\u001b[38;2;87;158;214mp\u001b[39m\u001b[38;2;88;157;215ml\u001b[39m\u001b[38;2;88;156;217ma\u001b[39m\u001b[38;2;89;155;218mt\u001b[39m\u001b[38;2;89;154;220me\u001b[39m \u001b[38;2;89;152;221mc\u001b[39m\u001b[38;2;90;151;223mo\u001b[39m\u001b[38;2;90;150;224mm\u001b[39m\u001b[38;2;91;149;226mp\u001b[39m\u001b[38;2;91;148;227mo\u001b[39m\u001b[38;2;92;146;229ms\u001b[39m\u001b[38;2;92;145;230me\u001b[39m\u001b[38;2;93;144;232md\u001b[39m \u001b[38;2;93;143;234mo\u001b[39m\u001b[38;2;94;142;235mf\u001b[39m \u001b[38;2;94;140;237mV\u001b[39m\u001b[38;2;95;139;238mi\u001b[39m\u001b[38;2;95;138;240mt\u001b[39m\u001b[38;2;96;137;241me\u001b[39m \u001b[38;2;96;136;243ma\u001b[39m\u001b[38;2;97;134;244mn\u001b[39m\u001b[38;2;97;133;246md\u001b[39m \u001b[38;2;98;132;247mr\u001b[39m\u001b[38;2;98;131;249mo\u001b[39m\u001b[38;2;99;130;250ml\u001b[39m\u001b[38;2;99;128;252ml\u001b[39m\u001b[38;2;100;127;253mu\u001b[39m\u001b[38;2;100;126;255mp\u001b[39m'

export { defaultBanner, gradientBanner }

const defaultBanner =
  'electron-vite-template : a vue3-vite-electron project template composed of Vite and rollup'

// 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 gradientBanner =
  '\u001b[38;2;66;211;146me\u001b[39m\u001b[38;2;66;211;146ml\u001b[39m\u001b[38;2;66;211;146me\u001b[39m\u001b[38;2;66;211;146mc\u001b[39m\u001b[38;2;66;211;146mt\u001b[39m\u001b[38;2;66;211;146mr\u001b[39m\u001b[38;2;66;211;146mo\u001b[39m\u001b[38;2;66;211;146mn\u001b[39m\u001b[38;2;66;211;146m-\u001b[39m\u001b[38;2;66;210;148mv\u001b[39m\u001b[38;2;67;209;149mi\u001b[39m\u001b[38;2;67;207;151mt\u001b[39m\u001b[38;2;68;206;152me\u001b[39m\u001b[38;2;68;205;154m-\u001b[39m\u001b[38;2;69;204;155mt\u001b[39m\u001b[38;2;69;203;157me\u001b[39m\u001b[38;2;70;201;158mm\u001b[39m\u001b[38;2;70;200;160mp\u001b[39m\u001b[38;2;71;199;161ml\u001b[39m\u001b[38;2;71;198;163ma\u001b[39m\u001b[38;2;72;197;164mt\u001b[39m\u001b[38;2;72;195;166me\u001b[39m \u001b[38;2;73;194;167m:\u001b[39m \u001b[38;2;73;193;169ma\u001b[39m \u001b[38;2;74;192;171mv\u001b[39m\u001b[38;2;74;191;172mu\u001b[39m\u001b[38;2;75;189;174me\u001b[39m\u001b[38;2;75;188;175m3\u001b[39m\u001b[38;2;76;187;177m-\u001b[39m\u001b[38;2;76;186;178mv\u001b[39m\u001b[38;2;77;185;180mi\u001b[39m\u001b[38;2;77;183;181mt\u001b[39m\u001b[38;2;77;182;183me\u001b[39m\u001b[38;2;78;181;184m-\u001b[39m\u001b[38;2;78;180;186me\u001b[39m\u001b[38;2;79;179;187ml\u001b[39m\u001b[38;2;79;177;189me\u001b[39m\u001b[38;2;80;176;191mc\u001b[39m\u001b[38;2;80;175;192mt\u001b[39m\u001b[38;2;81;174;194mr\u001b[39m\u001b[38;2;81;173;195mo\u001b[39m\u001b[38;2;82;171;197mn\u001b[39m \u001b[38;2;82;170;198mp\u001b[39m\u001b[38;2;83;169;200mr\u001b[39m\u001b[38;2;83;168;201mo\u001b[39m\u001b[38;2;84;167;203mj\u001b[39m\u001b[38;2;84;166;204me\u001b[39m\u001b[38;2;85;164;206mc\u001b[39m\u001b[38;2;85;163;207mt\u001b[39m \u001b[38;2;86;162;209mt\u001b[39m\u001b[38;2;86;161;210me\u001b[39m\u001b[38;2;87;160;212mm\u001b[39m\u001b[38;2;87;158;214mp\u001b[39m\u001b[38;2;88;157;215ml\u001b[39m\u001b[38;2;88;156;217ma\u001b[39m\u001b[38;2;89;155;218mt\u001b[39m\u001b[38;2;89;154;220me\u001b[39m \u001b[38;2;89;152;221mc\u001b[39m\u001b[38;2;90;151;223mo\u001b[39m\u001b[38;2;90;150;224mm\u001b[39m\u001b[38;2;91;149;226mp\u001b[39m\u001b[38;2;91;148;227mo\u001b[39m\u001b[38;2;92;146;229ms\u001b[39m\u001b[38;2;92;145;230me\u001b[39m\u001b[38;2;93;144;232md\u001b[39m \u001b[38;2;93;143;234mo\u001b[39m\u001b[38;2;94;142;235mf\u001b[39m \u001b[38;2;94;140;237mV\u001b[39m\u001b[38;2;95;139;238mi\u001b[39m\u001b[38;2;95;138;240mt\u001b[39m\u001b[38;2;96;137;241me\u001b[39m \u001b[38;2;96;136;243ma\u001b[39m\u001b[38;2;97;134;244mn\u001b[39m\u001b[38;2;97;133;246md\u001b[39m \u001b[38;2;98;132;247mr\u001b[39m\u001b[38;2;98;131;249mo\u001b[39m\u001b[38;2;99;130;250ml\u001b[39m\u001b[38;2;99;128;252ml\u001b[39m\u001b[38;2;100;127;253mu\u001b[39m\u001b[38;2;100;126;255mp\u001b[39m'

export { defaultBanner, gradientBanner }

deepMerge

ts
// 这段代码定义了一个名为 isObject 的函数，用于判断传入的参数是否为对象类型
// 具体实现是检查传入的参数 val 是否存在，并且是否为 object 类型。如果满足条件，函数返回 true，否则返回 false
// 可以使用这个函数来进行类型检查，例如在处理 JSON 数据时，需要判断一个属性值是否为对象类型，就可以使用这个函数来判断
const isObject = (val) => val && typeof val === 'object'

// 这段代码定义了一个名为 mergeArrayWithDedupe 的函数，它接受两个数组 a 和 b 作为参数，并返回一个新数组，其中包含 a 和 b 中所有不重复的元素。具体实现上，它通过使用 Set 和展开运算符 ... 来合并两个数组，并确保不会有重复元素，然后将结果转换回数组格式
// "Dedupe"是"de-duplicate"的缩写，意思是去重或消除重复
const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))

// 这段代码定义了一个名为 deepMerge 的函数，该函数用于递归地将一个新的对象与现有对象合并。它接受两个参数：target 表示现有的对象，obj 表示新的对象。函数会遍历新对象的属性，如果这个属性在现有对象中存在，那么会对它们进行合并，否则直接将新对象的属性添加到现有对象中。具体地，如果这个属性的值既不是数组也不是对象，那么直接用新对象的值覆盖现有对象的值；如果这个属性的值是数组，那么会合并两个数组并去重；如果这个属性的值是对象，那么会递归地调用 deepMerge 函数进行合并。最后返回合并后的现有对象
/**
 * Recursively merge the content of the new object to the existing one
 * @param {Object} target the existing object
 * @param {Object} obj the new object
 */
function deepMerge(target, obj) {
  for (const key of Object.keys(obj)) {
    const oldVal = target[key]
    const newVal = obj[key]

    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
      target[key] = mergeArrayWithDedupe(oldVal, newVal)
    } else if (isObject(oldVal) && isObject(newVal)) {
      target[key] = deepMerge(oldVal, newVal)
    } else {
      target[key] = newVal
    }
  }
  return target
}

export default deepMerge

// 这段代码定义了一个名为 isObject 的函数，用于判断传入的参数是否为对象类型
// 具体实现是检查传入的参数 val 是否存在，并且是否为 object 类型。如果满足条件，函数返回 true，否则返回 false
// 可以使用这个函数来进行类型检查，例如在处理 JSON 数据时，需要判断一个属性值是否为对象类型，就可以使用这个函数来判断
const isObject = (val) => val && typeof val === 'object'

// 这段代码定义了一个名为 mergeArrayWithDedupe 的函数，它接受两个数组 a 和 b 作为参数，并返回一个新数组，其中包含 a 和 b 中所有不重复的元素。具体实现上，它通过使用 Set 和展开运算符 ... 来合并两个数组，并确保不会有重复元素，然后将结果转换回数组格式
// "Dedupe"是"de-duplicate"的缩写，意思是去重或消除重复
const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))

// 这段代码定义了一个名为 deepMerge 的函数，该函数用于递归地将一个新的对象与现有对象合并。它接受两个参数：target 表示现有的对象，obj 表示新的对象。函数会遍历新对象的属性，如果这个属性在现有对象中存在，那么会对它们进行合并，否则直接将新对象的属性添加到现有对象中。具体地，如果这个属性的值既不是数组也不是对象，那么直接用新对象的值覆盖现有对象的值；如果这个属性的值是数组，那么会合并两个数组并去重；如果这个属性的值是对象，那么会递归地调用 deepMerge 函数进行合并。最后返回合并后的现有对象
/**
 * Recursively merge the content of the new object to the existing one
 * @param {Object} target the existing object
 * @param {Object} obj the new object
 */
function deepMerge(target, obj) {
  for (const key of Object.keys(obj)) {
    const oldVal = target[key]
    const newVal = obj[key]

    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
      target[key] = mergeArrayWithDedupe(oldVal, newVal)
    } else if (isObject(oldVal) && isObject(newVal)) {
      target[key] = deepMerge(oldVal, newVal)
    } else {
      target[key] = newVal
    }
  }
  return target
}

export default deepMerge

sortDependencies

特性：在写入依赖项到磁盘之前先对其进行排序，这样用户之后的npm add的调用不会干扰 package.json 的排序

ts
// feat: sort dependencies before writing to disk
// So that users' subsequent `npm add` calls won't mess the `package.json`.
export default function sortDependencies(packageJson) {
  const sorted = {}

  const depTypes = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']

  for (const depType of depTypes) {
    if (packageJson[depType]) {
      sorted[depType] = {}

      Object.keys(packageJson[depType])
        .sort()
        .forEach((name) => {
          sorted[depType][name] = packageJson[depType][name]
        })
    }
  }

  return {
    ...packageJson,
    ...sorted
  }
}

// feat: sort dependencies before writing to disk
// So that users' subsequent `npm add` calls won't mess the `package.json`.
export default function sortDependencies(packageJson) {
  const sorted = {}

  const depTypes = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']

  for (const depType of depTypes) {
    if (packageJson[depType]) {
      sorted[depType] = {}

      Object.keys(packageJson[depType])
        .sort()
        .forEach((name) => {
          sorted[depType][name] = packageJson[depType][name]
        })
    }
  }

  return {
    ...packageJson,
    ...sorted
  }
}

Released under the MIT License.

Copyright © 2022.4-2024.7