[前端进阶]从零搭建属于你的脚手架

每日一鱼
1,418 阅读4分钟

给自己搭建一个脚手架

背景

一丶跳出舒适区

大部分前端选手，也包括我自己，经常都是vue-cli，或者create-react-app一把梭。不得不承认这些著名的脚手架写的确实好，能够给我们做项目提速。但是久而久之很容易进入自己的舒适区，最近不是很流行“跳出舒适区”吗？而且各大培训机构都做贩卖焦虑，就为了可以让更多的人可以去买课。

这里我就不贩卖焦虑了。大家有自己的选择，只要自己不后悔就好。

二丶市面上脚手架的缺陷

虽然vue-cli等脚手架已经布置好了很多东西，包括router，css的解析等等。

但是！

但是啊，但是这些脚手架并不知道我们公司的或者说我们个人项目的网络请求，而且网络请求内部怎么封装的也没有统一的处理。也不知道我们的一些通用的登陆页等等。这些都需要我们重新的CV一下，或者自己重新做。

三丶过分使用别人搭建的脚手架可能会带来以下问题

  • 忘记，或者不知道webpack或者路由的配置，经常会在面试的临时抱佛脚，不能够真正的掌握，终究是纸上谈兵
  • 一些常见的坑点都被别人踩过并铺好路了，在不了解原理又没有踩过坑的情况下如果碰到问题很容易耽误大量的时间
  • 一些新框架的升级，只能等别人的cli版本升级之后才可以享受。慢人一步！
  • 配置一些项目相关的东西，经常需要翻看文档。
  • ……

四丶原因

我们做脚手架有以下几个原因

  • 学习脚手架的思想
  • 了解脚手架的构成
  • 省略一下CV的操作，更快更灵活的开始自己公司或者自己个人项目
  • 可以深入的配置自己的项目

开始

准备工作

commander

用于node.js命令行界面的完整解决方案。基本上是前端脚手架必备的。

这里只介绍

  • version
  • command
  • description
  • action

简单使用，毕竟只是入门，后续一些复杂的定制化的就需要大家自己去探索了。

好了，收！

怎么用？

const { program } = require('commander')
program
  .version(`react-cli-mobile ${packages.version}`)
  .command('create <name>')
  .description('初始化模板')
  .action((projectName, cmd) => {
    const options = cleanArgs(cmd)
    creator(projectName, options)
  })

fs-extra

fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API

这里只介绍

  • copy 复制文件

  • existsSync

copy用于复制。网上的一些脚手架教程用的是[download-git-repo]库。我发现这个只能下载某个仓库的文件，这样的话会导致我的项目会有两个。一个用于脚手架的代码，另一个是template的仓库。这样我觉得不太适合我，因为我不是很想找脚手架上面下太多的功夫搞交互，我只是想可以更方便更快的新建我的项目，而且我也不想弄两个仓库，我觉得有点多余。

当然了，这只代表我的个人想法，大家可以自行选择。

怎么用？

const fs = require('fs-extra')
if(fs.existsSync(targetDir)) {
    console.error('目录已经存在')
    return
}

// 复制模板文件
  await fs.copy(src, dest)

path

很简单，字面意思，主要是用于配合【fs-extra】这个库来使用的，主要还是给copy提供路径，就不多介绍了

怎么用？

const path = require('path')
const src = path.resolve(__dirname, dir);

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

// 复制模板文件
await fs.copy(src, dest)

ok，至此差不多我们的一个脚手架就可以出来了，其他的一些log颜色，路径判断，单词差异优化都不在本次介绍的范围内，本文主要是完成一个脚手架，然后重头戏还是自己的template。

步骤

  • 新建一个自己的文件夹
  • npm init配置
  • 获取用户输入的信息
  • 把自己的初始化项目放到template文件夹下面
  • cpoy 路径和自己template的路径，然后复制

大家可以看weboack的配置，然后放到自己的template juejin.cn/post/684490…

代码

代码的话这里就不贴了

大家可以直接到 react-cli-mobile上面看，里面有一些更加细微的操作。

结语

本来自己从webpack配置开始，从零搭建一个由

  • fetch
  • webpack
  • less（配置了css module
  • react
  • react-router（实现react原生懒加载）
  • typescript
  • 移动端适配（使用VW适配）
  • babel兼容低版本

大家可以

  • npm install react-cli-mobile -g
  • react-cli-mobile create xx
  • cd xx
  • npm install
  • npm start
  • 打开http://localhost:9000

或者直接查看源码

大家可以直接到 react-cli-mobile上面看

最后的最后

哪里写错了，或者写的不好，或者有不懂的欢迎大家在评论区交流

后续会继续推出从零配置移动端的webpack等配置的文章！欢迎大家关注点赞！谢谢！（已经更新了：juejin.cn/post/685041…

avatar
文章
阅读
粉丝