究竟什么是前端脚手架?

2019-06-14 admin

😔 咱也不知道咱也不敢问啊

先查查百度百科里对“脚手架”的定义吧:

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

然后搜一下“脚手架”,基本上都是以下几类:

  • Vue/React 脚手架
  • 使用 Node、yeoman 打造自己的脚手架
  • 从零搭建 webpack 脚手架

此时还是无法确定什么是“脚手架”,也许我心目中的脚手架应该是 vue/cli 或者 create-react-app 吧,然后我打开他们的文档,但是他们的介绍上并没有说这是一款脚手架…

谈一下我自己的“脚手架”

😔 我最怕别人看到我的“脚手架”后说这有什么卵用…

看了一下我第一次在 Github 上的提交记录 Commits on Feb 13, 2017,我入行三年多,那时应该是我第一次进入前端工程化的时候吧。在此之前我在公司接手的都是一些很简单的项目,直接新建文件夹,随手下载一个jQuery,然后新建 index.html main.js style.css,有没有同样经历的小伙伴们?

后来做的项目多了,觉得每次这么新建项目太麻烦,我新建了一个文件夹,专门存放初始的模板,然后复制粘贴,继续撸。

再后来,接触到 vue,他可以实现在终端内输入一行指令就能生成模板,这可比我复制粘贴看起来高端多了,为了装逼我开始了研究如何开发自己的“脚手架”。

当时还真是没有几篇文章把这种操作说的很明白,甚至我并不知道我要做的东西叫什么(脚手架)。

我理解的“脚手架”

🤓 百科里说的很对我的思路,首要的就是保证我的项目可以顺利进行。

  • 能够快速帮我生成新项目的目录模板(Node.js)。
  • 能够提升我的开发效率和开发的舒适性(webpack)。

分享点干货

从零搭建这种我就不说了,毕竟一搜一堆,基本上就是推荐几个库,例如 commander、inquirer、ora 等等。分享一些在我的脚手架开发时遇到的一些问题和需求,分享想给大家。

版本验证

首先推荐工具库:

semver,版本对比。

request,发送请求,当然你也可以用 axios。

const semver = require('semver');
const request = require('request');

如果你的脚手架想分享给别人用,这步最好不要避免,因为如果你用了一些现代化的 ES 语法,比如说 async await,老版本跑不起来的。

function checkNodeVersion (wanted) {
  // process.version 可以获取当前的 node 版本
  if (!semver.satisfies(process.version, wanted)) {
    console.log('Node版本不支持巴拉巴拉');
    // 退出进程
    process.exit(1);
  }
}

正如上面所说,你如果分享给别人用,在你修改了一些 bug 后,希望其他人用最新的版本,那就应该提示他。

function checkPackageVersion(url) {
  return new Promise((resolve, reject) => {
    request(url, function (error, response, body) {
      if (!error && response.statusCode === 200){
        let version = JSON.parse(body).version;
        if (semver.lte(version, requiredVersion)) {
          resolve();
        } else {
          console.log('需要更新你的包巴拉巴拉');
          process.exit(1);
        }
      } else {
        console.log('发送请求失败巴拉巴拉');
        resolve();
      }
    });
  });
}

参数 url 当然传入 npm 的链接 https://registry.npmjs.org/[你的包名]/latest

当前路径下是否存在相同的文件夹

如果不做这层判断,你新生成的项目很可能会覆盖你已有的项目,别问我为啥想到这么做 😭

function hasFolder(name) {
  return new Promise (resolve => {
    fs.exists(name, exists => {
      if (exists) {
        console.log('已经存在相同目录巴拉巴拉');
        process.exit(1);
      } else {
        resolve();
      }
    });
  });
};

这里加了一层 Promise 是因为 Node 去检测是否存在文件夹是个异步操作,也需要耗时,这么做比较保险。

清空控制台

当你输入完命令后,好像进入了新的页面一样,看起来很舒服。

function clearConsole(color, str) {
  if (process.stdout.isTTY && store.cmd !== 'test') {
    const blank = '\n'.repeat(process.stdout.rows);
    console.log(blank);
    readline.cursorTo(process.stdout, 0, 0);
    readline.clearScreenDown(process.stdout);
  }
}

拷贝模板

很多关于如果构建脚手架里提到一个工具 download-git-repo,在 github 或其他仓库中下载模板。我并不是很喜欢这种操作,1、耗时,让脚手架构建速度更慢了,在没有网络的情况下无法构建。2、在 git 仓库中还需要新建项目模板,感觉把一个项目分离成了两个,不方便管理。

所以我打算直接从全局目录下将模板文件夹拷贝到当前路径下:

使用一个工具 fs-extra,node.js 新手最好不要试图用原生接口拷贝一个文件夹。

const src = path.resolve(__dirname, ‘…/template’);

const dest = path.resolve(process.cwd(), store.dirname);

两个概念:

全局环境路径:

const src = path.resolve(__dirname, '你的模板文件夹相对路径')

当前环境路径:

const dest = path.resolve(process.cwd(), '你创建项目的名称');
  fs.copy(src, dest).then(() => /* 巴拉巴拉 */);

自动选择包管理器

现在用 yarn 的人越来越多,而且确实效率很高,如果安装过 yarn 就让它作为默认包管理器去自动安装依赖吧。

function packageManagement() {
  try {
    child_process.execSync('yarnpkg --version', { stdio: 'ignore' });
    return 'yarn';
  } catch (e) {
    return 'npm';
  }
}

自动安装依赖

这里用到 Node.js 中的 child_process.spawn 方法

这里举个例子,想要执行 npm install webpack -D

const ls = spawn('npm', ['isntall', 'webpack', '-D'], {shell: true});
ls.on('close', (code) => /* 巴拉巴拉 */)
  • 第一个参数:要运行的命令。
  • 第二个参数:数组,字符串参数的列表。
  • 第三个参数:配置,这里把 shell 设置为 true。
  • 使用 on 方法监听执行结果。

这里推荐安装的包带有版本号,如果直接安装会安装最新版,可能会导致不兼容。

提一个 webpack 的插件

ProgressPlugin,用于监听编译进度。

plugins: [
  new webpack.ProgressPlugin(function(percentage) {
    // percentage 进度 0-1
  })
]

这里配合前面说到的清空控制台,可以实现更好的体验。

使用 IP 访问项目

这里指的是通过 webpack 启动的 devServer。

host 配置为 0.0.0.0

通过下面的函数获取到本机的 IP 地址,这样就可以在同网下使用移动设备做测试了。

function getIPAdress() {
  let interfaces = require('os').networkInterfaces();
  // eslint-disable-next-line guard-for-in
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      let alias = iface[i];
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address;
      }
    }
  }
}

再逼逼几句

这是我理解中的“脚手架”,希望其他小伙伴也评论一下自己理解的脚手架。

😢 已经近一年没有做过技术分享了,每天在掘金里潜水,偶尔发点沸点,不敢在首页发内容,总觉得自己技术不足,怕大佬喷,自尊心受到创伤。

最后分享一下我的“脚手架”,这个项目在我面试中也起到了不错的效果:

文档:https://codexu.github.io/

[转载]原文链接:https://segmentfault.com/a/1190000019483074

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67306.html

文章标题:究竟什么是前端脚手架?

相关文章
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面。 深知自己前端技术不足,以前虽说用asp.net前后台都做,但...
2017-03-14
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
Adobe Flash究竟是怎么作死的?
编者按:屋漏偏逢连夜雨。近日,在Flash 被曝光了一个“近四年来最漂亮的Flash BUG”的同时,多家互联网公司已经陆续表态将会抛弃Flash。这个曾经在PC时代一统江湖的动画技术为何逐步被淘汰、被遗弃,这一路的过程究竟又是怎样? Fl...
2015-12-25
前端E2E测试框架 cypress了解一下
What is E2E? 所谓的E2E就是end-to-end。 假设我们编写的每个功能程序都是一个黑匣子,最终用户也只会看到这个黑匣子,那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不需要知道怎么实现的,我只管知道最终效果是...
2018-04-29
Sentry异常监控方案部署-前端攻略
原文首发于我的个人博客: https://lonhon.top/ 凡事只要有可能出错,那就一定会出错 对于任何一个项目而言,本地测试肯定做不到100%覆盖,而且,我们也不能保证用户能按照我们的预期进行操作,其实对我而言,用户才是最好的测...
2018-04-20
BetterJS:鹅厂前端脚本错误监控及跟踪解决方案
介绍 BadJS 是 web 前端脚本错误监控及跟踪解决方案。此项目为鹅厂 imweb(qq群:179045421) 团队的开源项目。 项目亮点 一站式体系化解决方案:业务只需要简单的配置,引入上报文件,即可实现脚本错误上报,每日统...
2018-04-26
回到顶部