[前端進階]從零搭建屬於你的腳手架

時間 2020-06-08

標籤前端進階搭建屬於腳手架简体版

原文原文鏈接

給本身搭建一個腳手架

背景

一丶跳出溫馨區

大部分前端選手，也包括我本身，常常都是vue-cli，或者create-react-app一把梭。不得不認可這些著名的腳手架寫的確實好，可以給咱們作項目提速。可是長此以往很容易進入本身的溫馨區，最近不是很流行「跳出溫馨區」嗎？並且各大培訓機構都作販賣焦慮，就爲了可讓更多的人能夠去買課。css

這裏我就不販賣焦慮了。你們有本身的選擇，只要本身不後悔就好。前端

二丶市面上腳手架的缺陷

雖然vue-cli等腳手架已經佈置好了不少東西，包括router，css的解析等等。vue

可是！node

可是啊，可是這些腳手架並不知道咱們公司的或者說咱們我的項目的網絡請求，並且網絡請求內部怎麼封裝的也沒有統一的處理。也不知道咱們的一些通用的登錄頁等等。這些都須要咱們從新的CV一下，或者本身從新作。react

三丶過度使用別人搭建的腳手架可能會帶來如下問題

忘記，或者不知道webpack或者路由的配置，常常會在面試的臨時抱佛腳，不可以真正的掌握，終究是紙上談兵
一些常見的坑點都被別人踩過並鋪好路了，在不瞭解原理又沒有踩過坑的狀況下若是碰到問題很容易耽誤大量的時間
一些新框架的升級，只能等別人的cli版本升級以後才能夠享受。慢人一步！
配置一些項目相關的東西，常常須要翻看文檔。
……

四丶緣由

咱們作腳手架有如下幾個緣由webpack

學習腳手架的思想
瞭解腳手架的構成
省略一下CV的操做，更快更靈活的開始本身公司或者本身我的項目
能夠深刻的配置本身的項目

開始

準備工做

commander

用於node.js命令行界面的完整解決方案。基本上是前端腳手架必備的。git

這裏只介紹github

version
command
description
action

簡單使用，畢竟只是入門，後續一些複雜的定製化的就須要你們本身去探索了。web

好了，收！面試

怎麼用？

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。