【前端工程化】一：脚手架工具yeoman以及plop的使用 |
您所在的位置：网站首页 › 前端工程化工具链 › 【前端工程化】一：脚手架工具yeoman以及plop的使用 |
【前端工程化】一：脚手架工具yeoman以及plop的使用
|
脚手架的作用是创建项目基础结构，提供项目规范和约定，我们常用的三大框架也是有各自的脚手架生态 React.js项目 =》 create-react-app Vue.js项目 =》 vue-cli Angular项目 => angular-cli Yeoman Yeoman的基本使用 // 在全局范围内安装yo npm install yo --global # or yarn add global add yo // 安装对应的generator npm install generator-node --global # or yarn global add generator-node //通过yo运行generator(generator-node就是node) 回答一系列问题可以得到项目的结构 yo node Yeoman Sub Generator在已经生成的项目基础之上，再去生成新的文件 // 运行sub Generator 在原先的generator后面跟上sub generator的名称 yo node:cli // 安装命令行工具 yarn // 安装更新后的依赖 // 命令行工具可以通过yarn link作用到全局范围 yarn link // 运行作用到全局的命令行工具 my-module --help并不是所有的Generator都会提供子集generator，使用前应该阅读文档 Yeoman使用步骤总结 明确你的需求； 找到合适的Generator； 全局范围安装找到的Generator； 通过Yo运行对应的Generator； 通过命令行交互填写选项； 生成你所需要的项目结构; 自定义Generator基于Yeoman搭建自己的脚手架，比如vue-cli项目中加入axios模块等； Generator的本质就是一个npm模块 Generator有固定的项目结构,先yarn init初始化package.json文件，其中name就是generator的模块名；
安装工具函数 npm install yeoman-generator // index.js作为Generator的核心模块入口 // 需要导出一个继承自Yeoman Generator的类型 // Yeoman Generator在工作时会自动调用我们在此类型中定义的一些生命周期方法 // 我们在这些方法中可以通过调用父类提供的一些工具方法来实现一些功能，例如文件写入 const Generator = require('yeoman-generator') module.exports = class extends Generator { writing () { // yeoman自动在生成文件阶段调用此方法 this.fs.write( this.destinationPath('temp.txt'), Math.random().toString() ) } }yarn link的使用 开发过程中，两个或多个项目之间相互依赖时，可以使用yarn link将一个项目链接到另一个项目。 项目A中需要使用项目B时，可以使用yarn link或npm link将B引入到A。 link本身是软链接，yarn link是将资源存在yarn的内存中，相当于建立了一个通道。 在app文件夹下新建templates文件夹放置模板文件 this.fs.copyTpl(temp, output, data) 模板引擎可以使用EJS语法来创建变量 const Generator = require('yeoman-generator') module.exports = class extends Generator { writing () { const temp = this.templatePath('README.md') const output = this |
【本文地址】
今日新闻 |
推荐新闻 |