vue3中用到的工具包

崖下栖心007
1,081 阅读5分钟

vue3中用到的工具包

1.chalk

终端字符串样式设置

img

const chalk = require('chalk');
const log = console.log;
 
// Combine styled and normal strings
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
 
// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold('Hello world!'));
 
// Pass in multiple arguments
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
 
// Nest styles
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
 
// Nest styles of the same type even (color, underline, background)
log(chalk.green(
    'I am a green line ' +
    chalk.blue.underline.bold('with a blue substring') +
    ' that becomes green again!'
));
 
// ES2015 template literal
log(`
CPU: ${chalk.red('90%')}
RAM: ${chalk.green('40%')}
DISK: ${chalk.yellow('70%')}
`);
 
// ES2015 tagged template literal
log(chalk`
CPU: {red ${cpu.totalPercent}%}
RAM: {green ${ram.used / ram.total * 100}%}
DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
`);
 
// Use RGB colors in terminal emulators that support it.
log(chalk.keyword('orange')('Yay for orange colored text!'));
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));

2.minimist

解析参数选项

var argv = require('minimist')(process.argv.slice(2));
console.dir(argv);

$ node example/parse.js -a beep -b boop
{ _: [], a: 'beep', b: 'boop' }
$ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

3.execa

execa是可以调用shell和本地外部程序的javascript封装。会启动子进程执行。支持多操作系统，包括windows。如果父进程退出，则生成的全部子进程都被杀死。

const execa = require('execa');
 
execa('echo', ['unicorns']).then(result => {
    console.log(result.stdout);
    //=> 'unicorns'
});
 
// pipe the child process stdout to the current stdout
execa('echo', ['unicorns']).stdout.pipe(process.stdout);
 
execa.shell('echo unicorns').then(result => {
    console.log(result.stdout);
    //=> 'unicorns'
});
 
// example of catching an error
execa.shell('exit 3').catch(error => {
    console.log(error);
    /*
    {
        message: 'Command failed: /bin/sh -c exit 3'
        killed: false,
        code: 3,
        signal: null,
        cmd: '/bin/sh -c exit 3',
        stdout: '',
        stderr: '',
        timedOut: false
    }
    */
});

4.brotli

Brotli是一种通用的无损压缩算法

var brotli = require('brotli');
var decompress = require('brotli/decompress');
// decode a buffer where the output size is known
brotli.decompress(compressedData, uncompressedLength);
 
// decode a buffer where the output size is not known
brotli.decompress(fs.readFileSync('compressed.bin'));
// encode a buffer of binary data
brotli.compress(fs.readFileSync('myfile.bin'));
 
// encode some data with options (default options shown)
brotli.compress(fs.readFileSync('myfile.bin'), {
  mode: 0, // 0 = generic, 1 = text, 2 = font (WOFF2)
  quality: 11, // 0 - 11
  lgwin: 22 // window size
});

5. @microsoft/api-extractor

API Extractor是一个TypeScript分析工具，它可以产生三种不同的输出类型:

  1. API Report —API Extractor可以跟踪项目主入口点的所有导出，并生成一个报告作为API审查工作流的基础。

  2. .d.ts Rollups—类似于Webpack可以将所有JavaScript文件“卷起”到一个包中进行分发，API Extractor可以将你的TypeScript声明卷成一个单独的.d。ts文件。

  3. API Documentation—API Extractor可以为每个项目生成“doc model”JSON文件。这个JSON文件包含提取的类型签名和文档注释。API -documenter配套工具可以使用这些文件生成API参考网站，也可以使用它们作为自定义文档管道的输入。

6.@rollup/plugin-json

🍣将.json文件转换为ES6模块。

import json from '@rollup/plugin-json';
 
export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [json()]
};

7.@rollup/plugin-replace

在打包时替换文件中的字符串。

import replace from '@rollup/plugin-replace';
 
export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [replace({ __buildEnv__: 'production' })]
};

8.@types/jest&@types/puppeteer

这两个包包含Jest&puppeteer的类型定义

9.enquirer

时尚的CLI提示符，用户友好，直观，易于创建。

10.fs-extra

fs-extra添加了本地fs模块中不包含的文件系统方法，并为fs方法添加了promise支持。它还使用graceful-fs来防止EMFILE错误。它应该可以替代fs。

const fs = require('fs-extra')
 
// Async with promises:
fs.copy('/tmp/myfile', '/tmp/mynewfile')
  .then(() => console.log('success!'))
  .catch(err => console.error(err))
 
// Async with callbacks:
fs.copy('/tmp/myfile', '/tmp/mynewfile', err => {
  if (err) return console.error(err)
  console.log('success!')
})
 
// Sync:
try {
  fs.copySync('/tmp/myfile', '/tmp/mynewfile')
  console.log('success!')
} catch (err) {
  console.error(err)
}
 
// Async/Await:
async function copyFiles () {
  try {
    await fs.copy('/tmp/myfile', '/tmp/mynewfile')
    console.log('success!')
  } catch (err) {
    console.error(err)
  }
}
 
copyFiles()

11.jest

Jest是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。

他适用但不局限于使用以下技术的项目：Babel, TypeScript, Node, React, Angular, Vue

12.lint-staged

对暂存的git文件运行linters，不要让💩溜进你的代码库!

  // package.json
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write",
      "git add"
    ]
  },

13.prettier

prettier的是一个有自己的见解的代码格式化程序。它通过解析代码并使用自己的规则（考虑最大行长）重新打印代码，从而实现一致的样式，并在必要时包装代码。

14.puppeteer

Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome .用来做自动化测试，爬虫等

15.rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

16.rollup-plugin-terser

terser插件帮助我们在rollup.js打包过程中实现代码压缩, 取代uglify，支持ES模块

// rollup.config.js
import { terser } from "rollup-plugin-terser";
 
export default {
  input: "index.js",
  output: [
    { file: 'lib.js', format: 'cjs' },
    { file: 'lib.min.js', format: 'cjs' },
    { file: 'lib.esm.js', format: 'es' },
    { dir: '.', entryFileNames: 'lib-[format].js', format: 'iife'  }
  ],
  plugins: [
    terser({
      include: [/^.+\.min\.js$/, '*esm*'], 
      exclude: [ 'some*' ]
    })
  ]
};

17.rollup-plugin-typescript2

显示编译错误的typescript的Rollup插件。

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
 
export default {
    input: './main.ts',
 
    plugins: [
        typescript(/*{ plugin options }*/)
    ]
}

18.semver

npm的语义版本器

const semver = require('semver')
 
semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean('  =v1.2.3   ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
semver.minVersion('>=1.0.0') // '1.0.0'
semver.valid(semver.coerce('v2')) // '2.0.0'
semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

19.ts-jest

ts-jest是一个TypeScript预处理器，它支持Jest的source map，允许你使用Jest测试用TypeScript编写的项目。

20.tsd

检查TypeScript类型定义

declare const concat: {
    (value1: string, value2: string): string;
    (value1: number, value2: number): string;
};
 
export default concat;

21.typescript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作 Prototype。

22.yorkie

Git hooks made easy

Before

{
  "scripts": {
    "precommit": "lint-staged"
  }
}

After

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}
avatar
文章
阅读
粉丝