当前位置:   article > 正文

git log 获取构建时间_前端项目搭建部署全流程(四):脚手架与业务模块构建...

前端js怎么获取到项目构建版本时间

e0add435b62ab4daa2d6da7f50707199.png

1.前言

继上一篇文章之后一个简单的React项目模板已经搭建好了,这篇文章主要写一下简易脚手架以及业务模块的生成命令行,以往我们使用较多的是vue-cli、create-react-app等开源脚手架,但是这些脚手架不一定符合我们当前使用的环境(比如公司的通用脚手架),这个时候我们就需要针对使用环境搭建一个脚手架,来提升整体的开发效率。

为什么要使用脚手架?简单描述几点:
  1. 减少重复的工作,不需要在内部通过ctrl+c、ctrl+v的方式复制项目结构
  2. 可以保持整个工程的项目结构以及编码规范保持一致等

......

仓库代码地址:https://github.com/huhaiqing106/MyProject/tree/master/DemoCli

2.支持的功能

这个脚手架写的比较简单,主要实现了两个功能:

  1. work init <project-name> <git or svn>根据可选仓库拉取远程模板,初始化一个项目
  2. work create <business-pageName>根据GIT仓库拉取业务模块模板,生成业务木块项目结构(这个模板没有实现功能,可以从这些方面去入手,比如包含一个标砖的查询界面或者内置一些通用的方法增、删、查、改等,可以快速构建一个简单的查询界面)

3.初始化项目

npm init -y

3.1.安装依赖

yarn add chalk commander download-git-repo inquirer node-svn-ultimate ora --dev

chalk修改控制台输出内容样式

commander命令行工具

download-git-repo从GIT拉取远程模板

inquirer交互式命令行工具

node-svn-ultimate从SVN拉取远程模板

ora显示loading动画

3.2.创建bin目录

bin目录下创建work-cli.js文件,文件顶部注解是告诉系统用node去执行,添加init命令

  1. #! /usr/bin/env node
  2. const program = require('commander');
  3. // 定义当前版本
  4. // 定义使用方法
  5. // 定义四个指令
  6. program
  7. .version(require('../package.json').version)
  8. .usage('<command> [options]')
  9. // 后期扩展支持根据配置的地址初始化模板
  10. // .command("init-config", "generate a new project from a config template")
  11. .command('init', 'generate a new project from git')
  12. .command('create', 'create a new business page from git');
  13. // 解析命令行参数
  14. program.parse(process.argv);

创建完改文件我们通过node ./bin/work-cli 执行,控制台会出现如下结果

6c598a5aae88d8d174a3f117d2d9ea73.png

如果每次都输入node ./bin/work-cli 就比较麻烦了,我们重新在package.json中增加启动命令

  1. {
  2. "name": "work-cli",
  3. "version": "0.0.1",
  4. "description": "work cli",
  5. "main": "index.js",
  6. "bin": {
  7. "work": "bin/work-cli.js"
  8. },
  9. ...
  10. }

然后通过npm link挂载到全局,这样就只需要输入work就可以运行了

8ba3a71d52bdf3218468189c6f77a586.png

我们可以通过npm list -g --depth 0查看全局的依赖,然后通过npm unlink卸载挂载到全局的命令,卸载的命令名就是当前工程下package.json中的name

c2432cc69fa0300f8ea1dc14607b2456.png

4.编写command命令

4.1.init命令

当执行work init时,node会自动从bin目录下查找work-cli-xxx.js的文件

work init <project-name> <git or svn>

work-cli-init.js代码如下,处理argv的参数以及分发到对应的仓库文件拉取模板,然后删除从仓库拉取下来之后目录中的.git/.svn文件,让目录与拉取仓库解绑,目录文件不展示仓库状态图标

  1. #!/usr/bin/env node
  2. const program = require('commander');
  3. const chalk = require('chalk');
  4. const ora = require('ora');
  5. const initSvn = require('./work-cli-svn');
  6. const initGit = require('./work-cli-git');
  7. const deleteFolder = require('./common/deleteFile');
  8. program.usage('<project-name> <git or svn>');
  9. program.parse(process.argv);
  10. // 当没有输入参数的时候提示
  11. if (program.args.length < 1) return program.help();
  12. const projectName = program.args[0];
  13. // 校验下项目名称
  14. if (!projectName) {
  15. console.log(chalk.red('n Project should not be empty! n'));
  16. return;
  17. }
  18. const warehouseType = program.args[1];
  19. // 校验仓库类型
  20. if (!warehouseType) {
  21. console.log(chalk.red('n Warehouse should not be empty! n'));
  22. return;
  23. }
  24. console.log(chalk.white('n Start generating... n'));
  25. // 加载图标
  26. const spinner = ora('Downloading...');
  27. spinner.start();
  28. const callBack = (err, fileName) => {
  29. spinner.succeed();
  30. if (err) {
  31. console.log(chalk.red('n Copy project template exception'));
  32. console.log(`n ${err}`);
  33. } else {
  34. try {
  35. deleteFolder('./' + projectName, fileName);
  36. } catch (error) {
  37. console.log(chalk.yellow('n Delete ' + fileName + ' folder exception, but does not affect operation'));
  38. }
  39. console.log(chalk.green('n Generation completed!'));
  40. console.log('n To get started');
  41. console.log(`n cd ${projectName} n`);
  42. }
  43. };
  44. if (warehouseType === 'svn') {
  45. initSvn(projectName).then((err) => {
  46. callBack(err, '.svn');
  47. });
  48. } else {
  49. const repository = 'direct:https://github.com/huhaiqing106/react-temlpate.git';
  50. initGit(repository, projectName).then((err) => {
  51. callBack(err, '.git');
  52. });
  53. }

Git仓库拉取的时候repository需要特别注意下地址一定要带上direct:,GIT地址从这里copy,然后加上direct:

3aa8adf16096151f9bb92b11ae522d4d.png

4.1.1.work-cli-git文件

这个文件很简单,就是从GIT拉取模板

  1. const download = require('download-git-repo');
  2. module.exports = (repository, projectName) => {
  3. return new Promise((resolve, reject) => {
  4. download(repository, projectName, { clone: true }, function (err) {
  5. resolve(err);
  6. });
  7. });
  8. };

4.1.2.work-cli-svn文件

  1. const svnUltiMate = require('node-svn-ultimate');
  2. module.exports = (projectName) => {
  3. const svnUrl = 'xxxx';
  4. return new Promise((resolve, reject) => {
  5. svnUltiMate.commands.checkout(svnUrl, projectName, { username: 'xxx', password: 'xxx' }, function (err) {
  6. resolve(err);
  7. });
  8. });
  9. };

这个文件是从SVN仓库拉取模板,这里需要注意几点,因为node是通过命令行去拉取的模板,所以我们的环境需要支持svn命令,参考如下:

step 1

安装SVN命令行工具,附下载地址

下载Apache Subversion command line tools,这是一个可以在cmd下使用的命令行工具,解压后把里面bin目录这个路径添加到环境变量的path,这样在cmd下就可以使用了,和Linux下使用svn的习惯一样了。

step 2

配置环境变量

安装目录Apache-Subversionbin

4.1.3.deleteFile文件

这个文件主要是递归删除从仓库拉取下来的模板中的隐藏文件.svn/.git

  1. const fs = require('fs');
  2. /**
  3. * 寻找.svn文件,删除svn关联
  4. *
  5. * @param {*} pathStr
  6. */
  7. function deleteFolder(pathStr, fileName) {
  8. let files = [];
  9. if (fs.existsSync(pathStr)) {
  10. files = fs.readdirSync(pathStr, 'utf8');
  11. files.forEach(function (file, index) {
  12. let curPath = pathStr + '/' + file;
  13. // 匹配特定SVN文件夹,然后移除
  14. if (new RegExp(`^${fileName}$`).test(file)) {
  15. deleteFile(curPath);
  16. }
  17. });
  18. }
  19. }
  20. /**
  21. * 删除svn文件夹与文件
  22. *
  23. * @param {*} pathStr
  24. */
  25. function deleteFile(pathStr) {
  26. let files = [];
  27. if (fs.existsSync(pathStr)) {
  28. files = fs.readdirSync(pathStr, 'utf8');
  29. files.forEach(function (file, index) {
  30. let curPath = pathStr + '/' + file;
  31. if (fs.statSync(curPath).isDirectory()) {
  32. deleteFile(curPath);
  33. } else {
  34. fs.unlinkSync(curPath);
  35. }
  36. });
  37. fs.rmdirSync(pathStr);
  38. }
  39. }
  40. module.exports = deleteFolder;

4.2.create命令

create命令也一样,只是拉取的模板不同而已,所以直接上代码

  1. const program = require('commander');
  2. const chalk = require('chalk');
  3. const initGit = require('./work-cli-git');
  4. const ora = require('ora');
  5. const deleteFolder = require('./common/deleteFile');
  6. program.usage('<business-pageName>');
  7. program.parse(program.args);
  8. if (program.args.length < 1) {
  9. return program.help();
  10. }
  11. const pageName = program.args[0];
  12. if (!pageName) {
  13. console.log(chalk.red('n PageName should not be empty n'));
  14. return;
  15. }
  16. console.log(chalk.white('n Start generating... n'));
  17. // 加载图标
  18. const spinner = ora('Downloading...');
  19. spinner.start();
  20. const repository = 'direct:https://github.com/huhaiqing106/business-page-template.git';
  21. initGit(repository, pageName).then((err) => {
  22. spinner.succeed();
  23. if (err) {
  24. console.log(chalk.red('n Copy business page template exception'));
  25. console.log(`n ${err}`);
  26. } else {
  27. try {
  28. deleteFolder('./' + pageName, '.git');
  29. } catch (error) {
  30. console.log(chalk.yellow('n Delete ' + fileName + ' folder exception, but does not affect operation'));
  31. }
  32. console.log(chalk.green('n Generation completed!'));
  33. }
  34. });

5.发布npm

至此一个简易的脚手架已经搭建好了,本地我们可以通过npm link挂载到全局测试,测试通过之后,我们在发布到npm私服,然后通过npm install xxx -g将依赖安装到全局之后,就可以开心的玩耍了

6.参考文献

SVN安装教程:https://www.jianshu.com/p/725e49003e44

SVN命令行工具: http://www.visualsvn.com/downloads/

参考资料:https://juejin.cn/post/6844903807919325192#heading-10

第一次记录写文章,文笔有限,多多包涵,ヾ(´ー`)ノ゛谢谢♪

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/395025
推荐阅读
相关标签
  

闽ICP备14008679号