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

2022-07-14 21:00:14 浏览数 (1)

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

前情回顾

上篇文章大致分享了遇到的一个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 文件读写
代码语言：javascript复制
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 路径操作
代码语言：javascript复制
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()
代码语言：javascript复制
const { execFile } = require('child_process');
const child = execFile('node', ['--version'], (error, stdout, stderr) => {
  if (error) {
    throw error;
  }
  console.log(stdout);
});
  • util主要包含了一些验证方法。执行如下代码：
代码语言：javascript复制
  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
*/

总结

  • 脚手架的本质是将多个模块儿进行整合，基于公司业务为前提，对工作中常用的模块进行封装，形成统一的技术方案。
  • 在开发脚手架之前我们需要对具体的业务非常熟悉，知道每个细节。
  • 如果自己的技术积累足够的话，开发脚手架是没有问题的。

javascript基础知识总结

node.js git npm html linux

0 人点赞