前兩篇內容:
今天這篇文章我們繼續談談 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 個關鍵部分要留意 簡要說下。公司給你加薪,一般是因為 所以,加薪時,羅列的理由,最好是不可辯駁的事實。比如 這樣子的理由,都是事實,好談。一般不要以諸如我生孩子了 買...
選車真不是一件容易的事
也該有輛自己的車了,買車除了代步之外最關鍵是搭乙個更好的個人發展平台,用朋友的話說是為了賺更多的錢,這樣安慰一下,也是我買車最好的說服家人的理由了。在網上論壇差不多泡了一年多了,原來是什麼樣的車都看,別人對車的評價無關我痛癢,現在自己要選車了,一下不知選擇哪一款好。從我的預算和以往對車的了解我初步鎖...