公司要求統一一套前端腳手架，該怎麼選擇？

01-11

公司要求統一一套前端腳手架,組內討論定了React，Vue兩個方向，
1.React
基礎UI組件庫
pc，mobile:
ant-design(不包含React Native)

基礎腳手架:create-react-app
(需要eject)
2.Vue
基礎UI組件庫
pc：iview mobile：vux
基礎腳手架:vue-cli
大家開發的時候自行選擇，主要功能包括基礎組件,通用業務組件，網路請求庫，Proxy跨域代理，Auth許可權，Router路由unit,e2e測試，eslint代碼規範，Mock data本地模擬後台數據，圖表庫，webpack打包工具，自己構建的時候發現選擇很多，有沒有什麼好的建議比如echarts 還是highcharts,d3等還有就是webpack-dev-server用不用等。求大神解答

ant design pro.

有學習成本, 之後, 受益無窮

給你介紹一個好東西：https://github.com/egoist/poi

它是一個能滿足你統一React和vue甚至其他框架的腳手架。（注意：它的作用不僅僅這些）

推薦理由：

1，vuejs項目核心成員的作品

2，Used by Google

3，React Co-author star

4，好東西就是好東西，誰用誰知道，拿走不謝

忠實的螞蟻金服粉絲前來回答，直接一套react走起來，不多說，antd直接上吧，組件功能，社區強大，背靠偏右、sorrycc等大神以及及時issue回答問題，有什麼問題都可以github提問。當然數據管理庫用什麼都無所謂了，建議還是redux而不是dva，因為自由度更高一些。webpack腳手架方面，我覺得自己寫比較好，當然用create-react-app也不錯。

這個我們公司前端部門10個人，已經有了大大小小10+個項目的實踐了，react＋webpack＋redux+react-router+fetch+babel+eslint+mockjs，看項目是pc的還是mobile的，然後對應的UI組件選擇antd或者ant mobile，編輯器推薦用vscode，體驗了一天，就讓我放棄了使用了5年之久的sublime text，裡面設置好eslint規則，規則非常的精細，可以極大程度上讓整個團隊的組件代碼風格統一，一套組合拳，表示都可以hold住，項目的框架源碼我去年的時候已經開源到git，start已經1000+了噢，下面是截圖

結合mockjs數據返回

集成echart圖表

富文本編輯器draft.js

項目地址是

https://github.com/duxianwei520/react

親可以clone下來試試看，

另外，基於這個項目，我這幾天修改下了就變成了web mobile端的開發框架了，大家可以看看功能，

頁面切換

構建完成的包的分析截圖

Mobile端，大家可以看構建好的包大小，經過gzip壓縮之後，公共文件包是110.41K，在現在4G的網路環境下，問題不大，然後就是每個業務自己的業務js包了

項目地址是：duxianwei520/react-m

以後的以後，後面我會陸續做pc客戶端的實踐、native端的實踐，然後都會把代碼開源到git上，希望可以跟大家一起成長，嘿嘿~

在這個問題中涉及前端腳手架，e2e測試，eslint規範約束，mock方案都可以嘗試使用阿里雲前端團隊開源的Dawn，Dawn不與具體前端框架耦合，同時支持React，Vue，Angular等多種前端框架的初始化，打包，發布，測試等流程。Github地址 alibaba/dawn

詳細一點

#使用dn init創建模板 dn init -t vue


#如果開發React工程

dn init -t react
#不論是React還是Vue工程都可以使用dn dev命令進行開發

dn dev

#使用dn build命令進行打包 dn build

前端所謂的統一，就是再發明一個新的。

個人推薦 vue-cli，然後基於它來進行不同的 view 框架配置的修改

其實我在學習了前端幾個月，然後開始真正在實際項目中寫 js 過後一個月就開始魔改 vue-cli 之旅（ 1.0 剛出的時候，去配合大佬要求的目錄結構，其實就是對著官方文檔，瞎嘗試）。中間一年的時間，畢業，換公司，熟悉，理解業務強化基礎，雖然自己偶爾看一眼，因為公司有自己寫的 cli 工具，沒有再去處理構建相關的事情，不過最近又有了一些變化，但是依然能很快上手。

我覺得 vue-cli 是真正可以快速應用到任何需要加入 webpack/babal/postcss 等相關處理器的前端項目中來的（當然也包括 react，需要做一些微調）

我大概花了一天多的時間將之前一個純 gulp 並且沒有用任何模塊系統的項目改造成了 webapck + gulp 的項目。曬一下目錄結構（魔改 vue-cli，然後還有前端資源加上 node server。

先給一篇文章 vue-cli#2.0 webpack 配置分析，這裡對於 vue-cli 的每一個配置項都給出了相關的中文解釋。

源起

然後開始進入正題，我想說一下 我認為的打包 ，其實整個前端的資源來說，其實都是靜態文件，並不會在運行時動態更改。那麼打包，其實就是對於源文件處理然後生成新文件然後再去交給 http 伺服器去處理這麼一個過程。

於是 gulp 最常用的用法就是將多個文件拼合，生成一個文件，然後在 html 中，就引用這一個文件就夠了，偽代碼：

gulp.task("js", function() { gulp.src(["1.js","./src/*.js"]) .pipe(concat("main.js")) .pipe(minifyJs()) .pipe(gulp.dest("./dist/main.js")); });

webpack 中，處理同樣的問題的方式就是我指定一個入口文件。然後在這個入口文件中，入引入我這個 js（main.js）所有需要被打包的項（不考慮按需引用）那麼上面 js 文件的拼合，在 mian.js 中就是這樣的

// 需要將模塊改成響應的模塊導出規範。如果之前的文件是一個 iife 的話，應該是非常快速的 require("src/1.js") require("src/2.js") require("src/3.js") require("src/4.js") require("src/5.js") import * as classTriangle from "./src/6.js" window.classTriangle = classTriangle; // 之前是全局引用

最重要的更改，在 util.js , .babelrc , base.js ，dev / pord 都是根據根據項目調整就可以了。

核心：在 babel 中加入 preset-react react-hot-loader ， base 添加 jsx 的babel 編譯，entry 中同樣加入 react-hot-loader 以及 webpack-hot-middleware，main.js 加入 AppContainer 就可以支持 react jsx 以及 react 熱載入環境了，當你需要任何其他類型的前端組件庫都類似。然後你想用 vue 就用 vue ，想用 react 就用 react ，就和知乎一樣 -_- 混著用也是可以的。。。反正都有 dom 嘛。。

下面比較啰嗦，可不看。

廢話正題

上面廢話了半天。來正式講一下我的改造。主要集中在 build 文件夾。這裡是 npm script 。gulp 的部分這裡不講。

build.js

首先我們看一下用於生產環境的 build.js

這部份還沒牽扯到 react ，改造的話，主要是對於一些環境變數，埠，請求 url ，阿里雲配置的預設（前端，node混合的，主要是內部發布系統不支持這些東西。。而且還是本地構建。。）當然你也可以在構建完成之後，再加入上傳 cdn 等等操作。

然後講一下 config.js，這裡我是講 vue-cli 中的 config 的文件夾刪除了，不過 config 文件夾實際上作用就和下圖的 config.js 中一樣

這裡主要是配置一些 bulid/dev 兩個環境的變數，輸出路徑/postcss/請求代理/其他你自己想用的，比如我用的 serverConfig 。不過請求代理我並沒有通過 vue-cli 中的 proxyTable 去做，而是本地 nginx 代理完成的,不展開了

util.js

這裡我主要是把vue 單文件組件中的 style 處理 css 處理的部分全部刪除了。然後加入了 autoprefixer 以及 less/css，來進行我們自己的樣式的處理

webpack.base.conf.js

好像沒太多說的。我就把 .vue 的 loader 刪了，加入了 jsx 的編譯然後配置一下自己的 alias

{ test: /.(js|jsx)$/, loader: "babel-loader?cacheDirectory=true", include: [resolve("src"), resolve("public")], }

當然需要改 babel 的配置，加入 jsx 編譯支持

//.babelrc {"presets": [ [ "env", { "modules": false, "targets": { "browsers": ["> 1%"]}}],"react","stage-2"], "plugins": ["transform-runtime", "transform-es2015-modules-commonjs", "react-hot-loader/babel"] } } ] ] }

webpack.dev.conf.js 這裡加入 css 的處理，以及開發環境或者生成環境熱載入的處理。

pord 也基本上和上圖差不多了。。，主要是配置了一下壓縮相關的事情。

有點困，就不再繼續展開說到每一個細節了。。其實對於一個工程上的問題，自己也有很多的疑問，如果需要溝通可以帶著問題私信，我們一起探討一下。

ps ：晚上喝了點酒，回家看到這個問題，賊想答一下，結果就到這個點了（12/10 02:26）說了一堆廢話。

我所在的團隊經常會面對一些運營需求，有些能通過內部的一些平台配置或搭建出來，但還是常常有一些不大不小的需求，需要新開一個工程，每次配置 Webpack 那怕只用 5 分鐘也是浪費。勢必需要一個能在不同項目批量複製的方式，並且希望在眾多工程中是一致的，無論一個新同學過來，或老同學參與或處理一個舊工程，都不希望他在環境上再花時間，也不希望他要了解每個工程的運行、構建方式是啥，把時間花更需要的地方，當然這只是訴求之一。

於是，我們做了一個工具：Dawn - 基於「中間件和 Pipeline」的自動化構建工具

現在 Dawn 已經開源了，或可以試一試，以「中間件」形式封裝常用功能，並能以 pipeline 去組織構建任務。

針對一個基於 Webapck + React 的前端工程，通常僅需如下少量配置:

# 啟動開發服務 dev: - name: webpack entry: ./src/*.js template: ./assets/*.html watch: true - name: server port: 8001 - name: browser-sync

# 直接構建 buid: - name: webpack entry: ./src/*.js template: ./assets/*.html

在工程根目錄，添加一個 .dawn/pipe.yml 文件，加入如上配置。

然後就可以，通過如下命令

dn dev

上邊的命令會啟動 webpack 實時編譯和 DevServer 及瀏覽器自動刷新，可以愉快的 Coding 了。

打包 prod 版本時，需要如下命令

dn build

發布時，只需要如下，便可發布到 cdn 或其它目標環境

dn publish

當然，需要先安裝好 Dawn

npm i dawn -g

安裝好後，其實也不用去手動配置，通過 init 命令，就可以快速初始化一個基礎的 React 工程，如下

dn init -t react

上邊的 React 是一個模板，用於「模板」可以快速的創建一個應用，我們在廠內，結合我們的業務場景進行了梳理，針對不同業務場景製作了有限的幾個模板，Dawn 可以連接一個 Server（就是一個能託管靜態文件的 WebServer），在 Server 上可以放一個清單，然後通過如下命就會列出來相關模板列表

dn init

好了，無論新老同學都能「一目了然」。

react-starter-kit

原文：前端工程指導 onface/workflow

技術選型

上一章：構建系統

既然是技術選型自然要知道有哪些選項

HTML模板引擎

你的項目會使用到 React/Vue/Angular 其中一個，則完全不需要HTML模板引擎。否則你可以選擇 ejs pug(jade)handlebars 等模板引擎。團隊負責人應根據項目情況去選擇，而不是個人喜好。了解主流模板引擎的不同點不會花很多時間，磨刀不誤砍柴工。

CSS 預處理器

主流的有 less sass stylus

預處理不像HTML模板引擎那樣，不同的模板引擎有很大差異。CSS 預處理器選擇最契合團隊環境的就可以。作者推薦less，原因是安裝快

不推薦 CSS in JS解決樣式衝突，推薦使用 CSS modules

CSS框架

最為出名的CSS框架就是 Bootstrap，但是項目中還是儘可能的不使用第三方CSS框架。而是根據項目情況自主開發，或者沿用團隊自主開發的框架。

比如 Alice 是支付寶的樣式解決方案，其實它只適合直接用在支付寶。而不適合直接在自己項目中用。

如果一個項目只有原型沒有設計稿，就可以選擇一個符合原型的CSS框架，減少開發工作量。

應該學習一個CSS框架的設計思想和代碼分類方式，而不是複製粘貼硬生生的加到項目中

JS框架

這個是重頭戲，前端社區不斷的有人在討論JS框架的技術選型。目前主流無非就以下幾個選擇

jQuery React Vue Angular

不同框架適合不同業務場景

頁面交互少，功能簡單的用 jQuery 綽綽有餘。

頁面關聯操作特別多，功能複雜的，必然要用 React/Vue/Angular。這種情況下需要團隊負責人根據項目業務場景和團隊人員對框架的熟悉程度進行評估，選擇一個最可行的方案。

比如一個項目非常非常適合使用 React 開發，但是團隊成員對 Angular 非常喜愛，也有了足夠的積累。對 React 的了解程度只是 單向數據流、JSX 並且沒有任何 React 方面的積累，構建系統都沒搭建過。那麼立即要開始的項目還是應該用 Angular 。後續再對團隊成員進行引導，慢慢了解和熟悉 React。

當然有些團隊很強悍，團隊成員對主流框架都用的得心應手。完全可以根據項目業務場景選擇最適合的框架。但是大部分的團隊還是沒那麼強悍的。

框架沒有高低之分，只有是否適合。

ES6 和 JavaScript 超集

ES6 指的是 ECMAScript6 JavaScript 超集指的是 CoffeeScript 和 TypeScript

ES6

構建系統應當支持ES6，團隊成員也必須學習ES6。因為它是標準。

JavaScript 超集

這個也是需要團隊負責人根據項目業務場景和團隊人員對框架的熟悉程度進行評估。超集會增加團隊學習成本、招聘成本和新人的培訓成本，如果超集確實能提高開發效率和提高項目穩定性還是應該推行使用的。

字體圖標平台

iconfont fontawesome 等平台都會提供一些字體圖標，建議團隊使用 iconfont 由設計師創建和維護圖標項目的內容。由前端維護圖標的 class 和尺寸的調整。

擴展閱讀： iconfont - Font class 是否可以提供 less 文件

兼容性

因為兼容性限制了技術選型所以專門提一下

技術負責人一定要在商業需求和開發成本中達到一個平衡，服務好客戶讓公司賺到錢是第一位。

這個很重要，主要決定權不在技術團隊，而是在於需求方。

如果要兼容IE8隻能使用 jQuery 1.x 和 React 0.14.x ，要兼容 IE6 IE7 就老老實實的用 jQuery 1.x regularjs Avalon

因為要兼容低版本瀏覽器，構建系統也需要做一些兼容處理 support-ie8

吐槽：要知道有些單元測試框架都不支持IE8了，寫個代碼不容易。

原文：前端工程指導 onface/workflow

可以看一下easywebpack前端工程化構建，並提供Vue，React相關解決方案，包括純前端多頁面構建，基於egg+vue或egg+react的server side render解決方案並提供對應骨架，直接可以拿來做實際項目開發。https://github.com/hubcarl

https://zhuanlan.zhihu.com/easywebpack

其實用什麼腳手架並不是最重要的吧？

你選擇了什麼前端框架，便間接的選擇了什麼腳手架，而不是因為腳手架去選擇框架吧？

如果團隊裡面有人能 hold vue，而沒人搞得定 react，難道你們要去選擇 create-react-app ？

無論 vue 還是 react，都有非常好的 ui 庫，比如螞蟻金服 antd，比如餓了么 element-ui，star都只在20K+，issue 回應也都很快。

所以我覺得你們應該以確認前端框架為主要，而不是以選擇腳手架為主要。

至於 webpack-dev-server，這兩個腳手架都會用到的。

圖表的話建議echart了，中文文檔全是一回事，問題是圖表太豐富了。用法上與highcharts沒多大區別，至於d3，emmmm... 我駕馭不了

======

那接下來是個人建議，個人來講喜歡vue也喜歡react，react接觸要比vue早。但現在以vue為主，公司項目裡面主推 vue。

為啥只用vue？

簡單，好學
文檔好
中國前端程序員掌握 vue 的比 react 的人多，會點的人更多
大家都會，那這塊的人才招聘的時候自然就便宜

比較一個團隊裡面還是高手少，你不能要求每個人啥都會，你也不能要求每個人每天都積極向上的學習各種技術。vue 自然而然就成了最佳選擇。

另一方面，個人覺得 vue-cli 非常的棒，eslint、unit、e2e 可以自動集成(這點可能是你想要的)，各種人性化的選擇，開箱即用(個人覺得 creat-react-app 不如 vue-cli，這個尤大做的太棒了~~~）

但這些都不重要

重要的是：大家選擇一種腳手架後，熟悉了裡面各種配置，每個項目的配置也一目了然，這點最重要吧。

所以選擇哪個都可以的，比較基礎設施大家都發展齊全了。所以重要的是喜歡哪個框架，能在所愛的框架中為所欲為，嗯~ 多麼奢侈的一件事

antd dva夠你喝一壺了。

ng4開箱即用，幾乎不用配置

看著你們這麼認真的討論腳手架這類項目基礎設施問題，用angular的只能哈哈了

webpack-dev-server 是默認就應該用的吧。。。快速開發，代碼效果立刻能看到，省去每次刷新的麻煩。 react和vue 組內大多數人熟悉哪個就用哪個啊。。對兩個都不熟悉的話，要不就vue？雖然我react黨。

圖表庫，d3上手會比echars難，短時間搞不定。建議 echarts，中文資料很多友好。

Angular5全家桶，不需要配置任何東西，還享受TypeScript和RxJs加成。

如果用vue的話，滴滴出的cubeUI不錯，用c3封裝的scroll體驗相當好。。其實react 和vue區別沒你想的那麼大，大概等同於早上吃韭菜包子還是肉包子的區別，團隊的技術棧偏向哪個就用哪個就行。

推薦一下我們團隊做的一套eslint腳手架，oishi,如果你採用react技術棧的話，oishi有推薦的官網eslint配置，並且掛載到git hook上，一套好的規範對於一個項目很重要，尤其你們項目才剛開始，幫你一鍵初始化，可以嘗試下

VUE: allan2coder/VUE2-SPA-Tutorial

React+redux+ant design: allan2coder/React-SPA