前端開發大殺器hey-cli,全域性支援vue react es6開發部署

vvpvvp發表於2018-02-27

前端腳手架

其實,這是一個整合的webpack腳手架。
現今網路上,相信關於webpack的配置,大家也看了不少,基本上比較流行的框架大家都推薦使用webpack來開發部署。
前面有vue-cli的工具,後有ant-design的,大家都基本上幫我們把webpack的那一些配置配置好。

可是,這些都存在webpack包資訊內容鑲嵌在專案內的問題。
這會導致,開發載入的時候需要npm install很久,每一個專案都需要安裝所有的webpack, 一大堆loader依賴。
而我的這個腳手架最大的功能就是系統全域性安裝,幾乎可以開發部署所有的線上主流專案。
所有的專案只需要載入自己需要的js依賴,做到一臺機器安裝,支撐所有的前端專案。

其實這個腳手架,我們已經用了一年了。
真實的感覺就是-很爽~~
但是因為我一直沒有什麼時間,就沒有推廣。

年後,終於有一絲絲的時間,可以開心的和大家分享了。

關於hey-cli

其實hey-cli是我們hey家族的主力產品,當然主要還是 heyui 這樣的元件庫了。
關於hey-cli的介紹,我覺得光說是不行的,所以花了一些時間,整理了hey-cli-template,裡面有一些主要的模板,後面我會詳細介紹。
首先,我把hey-cli的一些連結放出來:
github: github.com/heyui/hey-c…
npm: www.npmjs.com/package/hey…

文件

英文文件: 點這裡
中文文件: 點這裡

安裝

npm install -g hey-cli
複製程式碼
#開發
hey dev
#部署
hey build
#安裝模板
hey init <project-name>
#目前有的專案模板: simple, vue, heyui, elementui, iview, react(ant-design)
複製程式碼

模板說明

為什麼不說功能,直接從模板開始說起呢,因為,這樣才能最大程度說明這個腳手架的功能。
首先你需要,全域性安裝hey-cli。

npm install -g hey-cli

# new version npm
sudo npm install -g hey-cli --unsafe-perm=true --allow-root
複製程式碼

因為,目前這個腳手架沒有開始推廣,所以對於node的相容版本檢測還沒有出,但是主流穩定的版本一般都沒有問題,太舊的版本存在一些問題。
如果有人安裝出現問題,請及時反饋,十分感謝。

你有兩種方式嘗試,一個是使用hey init <project-name>命令安裝一些喜歡的模板。
還有一種是git clone https://github.com/heyui/hey-cli-template,如果你想嘗試所有的專案,可以更快一些。

simple

簡單的專案,html會自動引用js與css檔案,部署的時候會自動新增hash字尾。
支援ES6。
依賴包:none

cd simple
hey dev
複製程式碼

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

vue

vue的simple-webpack專案。但是沒有了webpack的一大堆依賴。
依賴包: vue

cd vue
npm install
hey dev
複製程式碼

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

heyui

我們的主打產品啦,直接從官網的demo上面拷貝了form的案例。
其實這裡使用了hey-cli的一個特性:globalVars: './src/css/var.less',這樣的配置可以讓你在所以的less檔案中使用這些全域性變數,包括vue檔案中的<style lang='less'>中。
依賴包: vue, heyui

cd heyui
#安裝兩個依賴包
npm install
hey dev
複製程式碼

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

elementui

主要是從Element官網的demo上面拷貝了一些demo。
依賴包: vue, element-ui

cd elementui
#安裝兩個依賴包
npm install
hey dev
複製程式碼

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

iviewui

依賴包: vue, iview

cd iviewui
#安裝兩個依賴包
npm install
hey dev
複製程式碼

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

react

其實react使用的是ant design的專案做示例的,用的就是入門文件的第一個demo。
react需要在hey.conf.js中新增react: true的配置項。
依賴包: react, moment, antd, react-dom

cd react
npm install
hey dev
複製程式碼

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

好吧,這些專案都介紹完了,以後想要開發什麼樣的專案,簡單就搞起。

功能

至於其他的功能,webpack大致有的都有。
一般專案需要整合的都新增了,這些就看反饋了,想要了解的我再出教程好了。

公眾號

今天新開通的公眾號,希望大家多多關注。
也許你會成為我們的第一位成員。

前端開發大殺器hey-cli,全域性支援vue react es6開發部署

相關文章