动手开发一个适用于公司项目的脚手架，2024年最新动态配置前端页面

最新推荐文章于 2024-08-01 08:00:00 发布

m0_57472099

最新推荐文章于 2024-08-01 08:00:00 发布

阅读量853

点赞数 8

分类专栏： 2024年程序员学习文章标签：前端

本文链接：https://blog.csdn.net/m0_57472099/article/details/137948054

版权

2024年程序员学习专栏收录该内容

315 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

另一种则是将模版文件放到某个服务器上，每次使用脚手架初始化时通过某个地址动态下载，想要更新升级模版会很方便，通常会选择托管在 github 上。

关于第二个模版放置究竟是选择在本地好，还是远端好，其实还是依据你个人的业务场景而定，在不同的场景的限制的需求不同，我之前既写过模版放在本地的脚手架（即和脚手架一起通过 npm 安装），也写过托管在 git 仓库上的这种方式。

回到我们「创建一个最简版的基于 Webpack 的前端项目」的目标，我准备了一个项目模版，之后就会用它来作为脚手架生成的项目内容。

2.2. 创建 generator（yeoman-generator）

创建 Yeoman 的 generator 需要遵循它的规则。

首先是 generator 命名规则。需要以generator打头，横线连接。例如你想创建一个名为 webpack-kickoff 的 generator，包名需要取成 generator-webpack-kickoff。

这样，当你通过

npm i -g yo

安装完 Yeoman 的 CLI 后，就可以通过yo命令来使用 generator 来启动脚手架：

yo webpack-kickoff

这里的 webpack-kickoff 就是包名里generator-后面的内容，Yeoman 会按这个规则去全局找相匹配的包。

其次，依据 Yeoman 的规范，默认情况下你需要在项目（即 generator）的generators/app/目录下创建index.js，在其中写入你的脚手架工作流程。当然，也可以通过修改配置来扩展或改变这个规则。

此外，你创建的 generator 类需要继承 yeoman-generator。所以我们会在generators/app/index.js中写如下代码：

const Generator = require( yeoman-generator );

class WebpackKickoffGenerator extends Generator {

constructor(params, opts) {

super(params, opts);

}

module.exports = WebpackKickoffGenerator;

还记得之前提到的“生命周期”方法么？包括 initializing、prompting、default、writing、conflicts、install 和 end。除了default，其他都代表了 Generator 中的一个同名方法，你需要的就是在子类中重写后所需的对应方法。default阶段则会执行用户定义的类方法。

例如，你想在初始化时打印下版本信息，可以这么做：

const Generator = require( yeoman-generator );

class WebpackKickoffGenerator extends Generator {

constructor(params, opts) {

super(params, opts);

}

initializing() {

const version = require( …/…/package.json ).version;

this.log(version);

}

module.exports = WebpackKickoffGenerator;

可见，剩下的工作就是在 WebpackKickoffGenerator 类中填充各种方法的实现细节了。

2.3. 处理用户交互

脚手架工作中一般都会有一些用户自定义的内容，例如创建的项目目录名，或者是否启用某个配置等。这些交互一般都是通过交互式的终端来实现的，例如下面这个功能。

可以使用 Inquirer.js 来实现。而 Yeoman 已经帮我们集成好了，直接在 generator 里调用 this.prompt 即可。

在用户交互部分的需求也比较简单，只需要询问用户所需创建的项目目录名即可，随后也会作为项目名。按照 Yeoman 的流程规范，我们将该部分代码写在 prompting 方法中：

class WebpackKickoffGenerator extends Generator {

// ……

prompting() {

const done = this.async();

const opts = [{

type: input ,

name: dirName ,

message: Please enter the directory name for your project：,

default: webpack-app ,

validate: dirName => {

if (dirName.length < 1) {

return ⚠️ directory name must not be null！;

}

return true;

}

}];

return this.prompt(opts).then(({dirName}) => {

this.dirName = dirName;

done();

});

}

// ……

}

注意，由于用户交互是一个“异步”的行为，为了让后续生命周期方法在“异步”完成后再继续执行，需要调用this.async()方法来通知方法为异步方法，避免顺序执行完同步代码后直接调用下一阶段的生命周期方法。调用后会返回一个函数，执行函数表明该阶段完成。

2.4. 下载模版

正如2.1.中所述，我们选择将模版托管在 github 上，因此在生成具体项目代码前，需要将相应的文件下载下来。可以使用 download-git-repo 来快速实现。

class WebpackKickoffGenerator extends Generator {

// ……

_downloadTemplate() {

return new Promise((resolve, reject) => {

const dirPath = this.destinationPath(this.dirName, .tmp );

download( alienzhou/webpack-kickoff-template , dirPath, err => {

if (err) {

reject(err);

return;

}

resolve();

});

}

// ……

}

这里我们使用了this.destinationPath()方法，该方法主要用于获取路径。不传参时返回当前命令行运行的目录；如果收到多个参数，则会进行路径的拼接。

此外，如果你细心的话，会发现_downloadTemplate()方法带了一个下划线前缀。这是 Yeoman 中的一个约定：Yeoman 执行顺序中有个default阶段，该阶段包含了所有用户自定义的类方法。但是，如果某些方法你不希望被 Yeoman 的脚手架流程直接调用，而是作为工具方法提供给其他类方法，则可以添加一个下划线前缀。对于这种命名的方法，则会在default阶段被忽略。