CRA 黑盒真不是你想的那麼可怕

2021-10-12 07:23:07 字數 2307 閱讀 2247

前兩篇內容:

今天這篇文章我們繼續談談 cra 黑盒的實現。

在專案開發中,我們把它分成三份:乙份是是專案結構,乙份是黑盒,乙份是最終的產出。

簡單來說,寫好後的專案,經過黑盒處理之後,就成了乙個可以上線部署的產品。這個處理過程就需要前端開發者們去努力實現了。

黑盒其實很簡單,就是需要我們打破平時的開發思維,給開發者提供更簡單的解決方案,一句話概括就是怎麼簡單怎麼來。

對於黑盒原理,我個人認為它其實就是包裹的 webpack 或者其他工具。

本篇文章我們就以 webpack 為例,寫乙個自己的黑盒。

正常使用 webpack 的開發中,我們需要手動建立乙個 webpack 的配置檔案 webpack.config.js 。

黑盒現在要做的是:

有乙個已經配置好的專案,如下圖:

配置檔案的內容很簡單,如下:

const path =

require

("path"

)module.exports =

}

現在我們要移除 webpack.config.js 檔案,同時在專案同級目錄下建個 cwj-page 的資料夾。

這個 cwj-page 就是我們要實現的黑盒。

它裡面的檔案結構如下:

bin 資料夾是我們使用該資料夾名稱當作指令要執行的檔案,在 bin 資料夾下建立乙個跟黑盒同名的 js 檔案: cwj-page.js 內容如下:

#!

/usr/bin/env node

const config =

require

(".."

)const webpack =

require

("webpack"

)const compiler =

webpack

(config,

(err,state)

=>

)

lib 是我們要儲存的乙個js檔案,這個檔案其實就是我們所有關於 webpack.config.js 的基本配置。

const path =

require

("path"

)const cwd = process.

cwd(

)const fs =

require

("fs"

)let config =

}// const loadconfig = require(`$/page.config.js`)

let cf = fs.

existssync(`

$/page.config.js`

)//判斷當前目錄下時候有約定的配置檔案

if(cf)

/page.config.js`

) config = object.

assign

(,config,loadconfig)

}catch

(e)}

else

,config)

}module.exports = config

完成之後我們現在要把 cwj-page 發布 npm 或者直接本地軟連線,因為我們後面的操作要完全使用黑盒指令對專案打包。所以在 cwj-page 下的終端進行 npm link,這樣在全域性安裝目錄下就會有乙個 cwj-page 的檔案。

再回到 demo 專案下,在 src 下的 index.js 隨便寫寫 js ** ,然後使用黑盒指令 cwj-page。

到此,乙個簡單的黑盒就算包裝成功了。

async await 真不是你想象中那麼簡單

先上 function getdata data,time time let results let starttime new date laucher async function laucher 在 毫秒放入 let datab await getdata b 3000 results.pus...

談加薪,真不是漲點錢那麼簡單

2018年只剩6周了,很多人心裡開始琢磨加薪的事情。然後,談加薪,真不是找老闆說一句話那麼簡單的事兒,它是乙個系統工程。這裡面有 4 個關鍵部分要留意 簡要說下。公司給你加薪,一般是因為 所以,加薪時,羅列的理由,最好是不可辯駁的事實。比如 這樣子的理由,都是事實,好談。一般不要以諸如我生孩子了 買...

選車真不是一件容易的事

也該有輛自己的車了,買車除了代步之外最關鍵是搭乙個更好的個人發展平台,用朋友的話說是為了賺更多的錢,這樣安慰一下,也是我買車最好的說服家人的理由了。在網上論壇差不多泡了一年多了,原來是什麼樣的車都看,別人對車的評價無關我痛癢,現在自己要選車了,一下不知選擇哪一款好。從我的預算和以往對車的了解我初步鎖...