前端脚手架开发需要了解哪些技术点

terrence386

发布于 2022-07-14 21:00:14

6140

文章被收录于专栏：JavaScript高级程序设计JavaScript高级程序设计

朋友圈的场景是信任，需要分享有质量的内容强化信任。

前情回顾

上篇文章大致分享了遇到的一个iframe问题，及iframe的常用属性，有些属性是我们不常用但是必须了解的。

因为最近团队里在做一个基于Vue的脚手架，刚好自己也对这个东西尝试过，所以刚好聊一下这个问题。

简单来说脚手架其实是一个项目框架，它的作用是快速对项目进行初始化。但是随着具体业务的复杂度加深，脚手架的开发似乎也越来越复杂。

比如需要考虑技术选型,数据流,UI组件库,打包方式,调试方式,甚至持续集成等问题。同时还需要考虑一定的可扩展性。

开发脚手架的基本思路

开发脚手架的思路很简单。

第一：先写好项目的模板，放到远程git仓库上。
第二：通过命令行执行初始化项目命令。这个过程会从远端模板仓库中下载对应的模板到本地，生成本地项目
第三：初始化完成后，安装对应的NPM依赖包即可进行本地开发
第四：如果这个脚手架足够强大，那么开发完成后执行对应的命令即可实现持续集成。否则，开发完成后需要手动去发布代码。

开发脚手架需要了解哪些npm包

chalk 命令行着色工具
huskey git提交检测工具
int-staged 代码格式化。这个通常跟huskey配合使用。
learna js npm 多包管理工具。如果我们开发的东西比较复杂，比如需要同时管理多个包，则需要整个工具
shelljs nodejs 执行shell命令工具。shelljs是阿里的一个人(花名huofeng)自己开发的，用在dawn这个框架中。同样功能的包有commander，cmdline,或者使用nodejs的内置exec功能。
invariant 通用错误提示方案。
del delete file and dir。
shify 执行脚本。
confman 最好用的配置加载器yuml,json...。
stream-to-buffer Concatenate a readable stream's data into a single buffer。
copy-dir 路径复制？这个时间长了我也忘了
decompress 用来进行文档提取。
mkdirp 递归生成文件夹。

开发脚手架需要了解哪些node模块儿

如果真的要自己开发一套脚手架,那么对于node的一些常用模块儿也必须非常熟悉。比如：

fs 文件读写

const fs = require('fs')
const { resolve } = require('path')

module.exports = async function (filename){
    return new Promise((resolve,reject)=>{
        fs.readFile(filename,(err,buffer)=>{
            if(err) return reject(err)
            resolve(buffer)
        })
    })
}

path 路径操作

onst path = require("path");
const pkg = require("../../package.json");
const ENV = process.env;

exports.homePath = function () {
  return ENV.HOME || ENV.USERPROFILE || ENV.HOMEDRIVE + ENV.HOMEPATH;
};

exports.dataPath = function () {
  return ENV.HOME || ENV.APPDATA || ENV.LOCALAPPDATA || ENV.TMPDIR || ENV.TEMP;
};

exports.storePath = function(){
  return path.normalize(`${this.dataPath()}/.${pkg.name}`);
}

exports.rcPath = function(){
  return `${this.homePath()}/.${pkg.name}`
}

child_process子进程。执行脚本命令，回调函数接受返回值，及错误信息，用法同child_process.exec()

const { execFile } = require('child_process');
const child = execFile('node', ['--version'], (error, stdout, stderr) => {
  if (error) {
    throw error;
  }
  console.log(stdout);
});

util主要包含了一些验证方法。执行如下代码：

  const util = require('util')
for(let key in util){
 console.log(key)
}
/*
format
isArray
isBoolean
isBuffer
isDeepStrictEqual
isNull
isNumber
isString
isUndefined
isRegexp
isObject
isError
isDate
isFunction
isPrimitive
log
promisify
TextDecoder
TextEncoder
types
*/