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

给本身搭建一个脚手架

背景

一丶跳出温馨区

大部分前端选手，也包括我本身，常常都是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的路径，而后复制

代码

代码的话这里就不贴了

你们能够直接到 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等配置的文章！欢迎你们关注点赞！谢谢！