輕量webpack腳手架 bicycle

jiekechoo 發布于2019-08-20 18:25 / 1720人閱讀

why

每次新建工程都要手動搭建基本的webpack項目結構(安裝各種loader、編寫webpack.config.js等)，一直想打造一個自己的webpack腳手架......

公司里有個現成的腳手架——挖掘機,各種服務都有，所以我們大家都親切的叫它“挖掘機”，但可惜它涵蓋了太多服務，有些是公司業務要求的服務，對于個人項目來說太重了，所以我并不想直接用它。

于是，我還是寫個適合自己的webpack腳手架吧。

需求

對于這個腳手架，我覺得它有如下需求

使用規范要和公司提供的"挖掘機"差不多(支持多入口開發，支持通用代碼打包vendor，自動生成引入chunk的html等)，省得我同時熟悉兩套規范

簡單輕量，不需要提供太多功能，但一定要方便使用

能滿足我常面對的開發需要，打包線上項目及app內嵌項目及基礎組件開發

可定制性強，技術盞的升級，不可避免要加入新的功能，因此它必須是容易定制修改的

bicycle 登場

因為公司提供的腳手架叫“挖掘機”，而我自己的腳手架比較輕量，而且我覺得更加方便，所以我給它取名叫 bicycle(自行車) ?

它遵循挖掘機的開發規范詳見https://github.com/SinaMFE/ma...,

啟動腳本，webpack.config等外置，方便定制

我為它加上了命令行初始化腳本 bicycle-cli,使用起來更加方便

特點&&規范

簡單輕量的webpack腳手架——bicycle

功能(feature):

輕松擁有多入口開發（打包時可指定入口）

一鍵生成基礎配置

打包配置腳本結構清晰，易修改，易擴展

可打包app內置頁

用法(usage):

npm install bicycle-cli -g

mkdir my-project

cd my-project

bicycle

//create ok !

yarn && yarn run dev/build index/[your entry dir name]

開發目錄結構(directory structure)

src
├── ... 可共用資源(common js/css/img/font)
└── entry  多入口開發目錄(entrys)
    ├── index  index入口
    │?? ├── index.html
    │?? └── index.js
    └── list   list入口
        ├── index.html
        └── index.js

注意(notice):

多入口開發時，入口名稱由entry下的文件夾名稱確定
入口文件必須為index.html
入口js必須為index.js

end

如果你平常開發有和我一樣的需求，可以試試 bicycle，有問題直接issue，我會不斷改進的 !!!

GPU云服務器云服務器 bicycle 腳手架腳手架使用項目腳手架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84493.html

Vant 1.0 發布：輕量、可靠的移動端 Vue 組件庫

摘要：是有贊前端團隊維護的移動端組件庫，提供了一整套基礎組件和業務組件。一關于距離首次發布剛好過去了半年時間，在這半年時間里團隊廣泛吸納社區的反饋和建議，持續對組件進行打磨優化，使得逐漸成長為一個輕量可靠的移動端組件庫。 Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant 可以快速搭建出風格統一的頁面，提升開發效率。 showImg(...

Prasanta 2019-08-22 15:32 評論0 收藏0
引言下面是一個使用腳手架來初始化項目的典型例子。 showImg(https://segmentfault.com/img/remote/1460000019219651?w=1312&h=533); 隨著前端工程化的理念不斷深入，越來越多的人選擇使用腳手架來從零到一搭建自己的項目。其中大家最熟悉的就是create-react-app和vue-cli，它們可以幫助我們初始化配置、生成項目結構、自...

AnthonyHan 2019-08-26 13:49 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網站積累，以每月的形式發布。年以前看這個網址概況在線地址前端開發群月報提交原則技術文章新的為主。平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發群月報提交原則：技...

FuisonDesign 2019-08-29 12:35 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網站積累，以每月的形式發布。年以前看這個網址概況在線地址前端開發群月報提交原則技術文章新的為主。平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發群月報提交原則：技...

ivyzhang 2019-08-20 16:29 評論0 收藏0