搭建自己的脚手架
原因:
需要搭建自己脚手架的原因:
虽然市面上存在很多已有的脚手架,比如vue框架的vue-cli、react相对的creat-react-app,但是在使用这些脚手架创建的项目时我们还是需要额外再添加一些其他的东西,比如使用vue-cli脚手架时,我们需要自己额外增加vue-router等。
为了后期自己创建项目方便,所以可以搭建一款自己的完整目录的脚手架;
使用yeoman脚手架工具创建项目流程方法:
yeoman是最通用的一款搭建脚手架的工具,基于yeoman脚手架搭建项目必须搭配一个对应的generator来实现,可以依据自己的项目需求在yeoman网站上搜索是否有对应的generator可直接使用,如果没有可自己创建一个generator,generator实质就是一个npm模块。
创建generator基于yeoman-generator这个基类,基类中提供了基于的API:
-
文件编辑,内置API,
fs.read、fs.readJSON可以读取一个文件以字符串形式或json形式返回文件内容。对应的fs.write、fs.writeJson可以用字符串或缓冲区替换文件的内容。可以读取文件内容放入另一文件、同时也有copy方法可以拷贝文件 -
可以实现的交互式命令行用户界面。在创建脚手架过程中使用
Inquirer.js内置方法实现和用户的交互,例如询问用户项目名称、配置的。项目中使用ejs模板引擎可以使用用户回答
脚手架核心原理: 基于提供的模板复制一份到我们需要创建项目的文件夹。
vue-cli也是采用的此方法,vue-cli的项目文件模板是从远程仓库拉取下来的。
核心原理: 需提供一套项目模板,项目模板文件可放于脚手架本地,也可放入远程仓库。这个依据自己实际情况而定。这里将模板文件放至脚手架本地。
脚手架工具就是一个node-cli应用。
整理思路:
参考vue-cli脚手架、网络上其他开发者分享的自定义脚手架,全局学习大体思路及具体使用到的node核心API及依赖包。
vue-cli脚手架:
官方脚手架基于webpack模板,其中包含了项目的构建,目前先不考虑,先完成基础脚手架。
拉勾课程示例思路:
1、使用inquirejs中prompt完成用户交互
2、新建templates文件夹,放入模板文件
3、使用node核心api:path、fs,读取模板文件
4、引入ejs模板引擎,读取用户交互中的答案,使用用户答案渲染页面
我的需求:
询问预设的问题、结合模板文件生成新的项目目录,项目中有基础的开发文件目录、基础的html、js、css文件。文件有一定的基础代码。
目前是基础的脚手架,依据提供的项目目录及具体文件新建项目目录。
模板目录:
-
templates
-
assets
- static
- index.css
- index.js
-
src
- index.html
-
需要用到的包:
1、inquirejs //prompt完成终端用户交互
3、chalk // 设置终端字符串样式
3、node fs、path //文件读写等、文件路径
4、ejs //模板引擎
具体实现:
1、本地文件夹新建目录,用于创建脚手架
2、脚手架根目录新建package.json文件,或者使用yarn init、npm init创建package.json文件
3、在package.json中新建bin字段,添加可运行命令的文件路径
{
...
"bin": {
"quick": "./bin/cli.js"
}
}
4、根目录下创建和package.json bin字段中值匹配的文件夹目录 bin ,创建 cli.js文件。编辑cli.js文件:
5、cli.js文件头部必须加入下面这行语句,这行语句让node识别
#!/usr/bin/env node
6、命令行终端,在项目根目录,即package.json所在目录下安装所需要的包。
yarn add inquirer --dev
yarn add chalk --dev
yarn add ejs --dev
7、cli.js 中使用commonjs规范引入需要的包
#!/usr/bin/env node
// 引入inquirejs 实现用户交互命令
const inquirer = require('inquirer');
const chalk = require('chalk');
const fs = require('fs');
const path = require('path');
const ejs = require('ejs');
8、使用inquire完成用户交互提问
9、使用node 核心模块fs和path,实现文件夹的读取、新建、写入
10、使用ejs 对html文件渲染用户交互的答案数据。
11、使用yarn link将脚手架link到全局,使在其他项目中可直接使用
yarn link
12、在需要新建项目的地方新建文件夹,命令行终端执行脚手架命令,此处我的脚手架命令为 quick,所以执行quick即可依据模板文件和用户交互的答案创建出对应的文件目录。
明确脚手架需求:
- 技术选型:使用vue开发项目(脚手架能否满足多终端需求)
- 编译:项目中会使用sass、es6、node、eslint、
- 构建:使用grunt构建
- 预览:热加载
\