Yeoman使用步骤总结

869 阅读2分钟

「这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战

前言

有的时候,我们并不需要创建一个完整的项目结构,可能我们只是需要在一定的项目基础上去创建一些特定类型的文件,例如:

  • 我们在一个原有的项目基础上创建某些类型的基础文件: Eslint、Babel等 这些配置我们直接进行配置可能会产生一些问题,这时候,我们就可以使用Yeoman的提供的方法来进行一些配置了

Sub Generator

这里我们可以使用Generator-node中提供的cli进行一些配置

命令:

yo node:cli

输入命令之后,我们选择yes

之后,会给我们创建一个lib文件夹+package.json

文件结构如下

image.png

我们回到文件中

我们发现 package.json中已经有了对应的配置

{
  "bin": "lib/cli.js",
  "dependencies": {
    "meow": "^3.7.0"
  },
  "devDependencies": {
    "lec": "^1.0.1"
  },
  "scripts": {
    "prepare": "lec lib/cli.js -c LF"
  }
}

有了这些我们就可以对这些变成全局模块进行使用了

常规使用步骤

  1. 明确你的需求
  2. 找到合适的Generator
  3. 全局范围安装找到的Generator
  4. 通过yo运行对应的Generator
  5. 通过命令行交互填写选项
  6. 生成你所需要的项目结构

举个例子

  1. 我们要创建一个网页应用:
  2. 这里我们先进入YEOMAN官网:YEOMAN
  3. 搜索web app
  4. 安装:npm install --global yo gulp-cli generator-webapp
  5. 安装之后我们可以通过YEOMAN运行这个yo webapp
  6. 之后会出现一些选项,比如提示你需不需要使用sass啊等等,根据你需要使用的,可以自己进行一些选择
  7. 最终我们就可以获得到一个web项目的基本结构

image.png

一个题外话

这里需要注意的是:使用这个生成器生成的项目,他的生成器中有依赖一些C++的模块,这些模块需要在安装的时候需要去下载一些二进制文件,这就会导致我们的安装比较的缓慢,但是如果说你对npm颇有心得,你应该知道,我们可以去设置一些对应的镜像去进行加速,这里我们提供一些配置文件

image.png