generator-ivweb 基於react-redux的多頁腳手架

背景

每一個公司甚至每一個項目組，在開發新項目的時候都會有一些本身特點的東西，好比公共組件，ajax請求攔截處理，內部積累的一些業務邏輯等等，若是沒有本身的腳手架，那麼拷貝代碼成爲常態，每一個項目的結構，甚至是構建配置都會由很大差別，致使代碼維護成爲一個難題。

簡介

generator-ivweb是由騰訊IVWEB團隊設計的腳手架，基於團隊開源項目feflow，feflow是一個前端集成開發環境，詳細介紹能夠看這裏：feflow。

技術棧

• React
• redux
• less
• axios

• webpack4
  ...

  讓你心動的地方

相對於官方腳手架，咱們不只僅是初始化一個項目，更多的是知足實際開發場景。

• 支持多頁項目
• 頁面適配
• 內聯語法
• 構建優化
• 豐富的默認配置文件

架構設計

目錄結構

generator-ivweb-app
├── README.md
├── package.json
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── feflow.json
├── config.json
├── node_modules
├── dist
└── src
    ├── assets
    ├── middleware
    ├── modules
    └── pages
        ├── otherPage
        └── indexPage
            ├── index.html
            ├── index.js
            ├── index.less
            ├── index.js
            ├── init.js
            ├── pageComponent.js
            ├── actions
            ├── assets
            ├── components
            └── reducers

• 開發和構建
  這裏咱們默認都是src爲開發目錄，dist爲打包目錄，固然你能夠在feflow.json中配置爲其餘輸出目錄。

{
    "builderOptions": {
        "outDir": "dist" //輸出目錄名稱
    }
}

• 多頁目錄
  多頁放在pages目錄下，每一個頁面一個單獨文件夾，訪問的路徑以下：

https://xxx.xxx.xxx/xxx/indexPage.html
https://xxx.xxx.xxx/xxx/otherPage.html

頁面結構化繼承（多頁設計）

正常來講，多頁應用只須要有本身的入口就能夠，在入口文件咱們可能須要作這麼幾件事

• 注入store
• 設置全局配置
• 頁面監控
• 將組件渲染到頁面
  ...
  上面只是列舉了一些基本的東西，固然還會有不少，甚至是一些跟業務相關的基本信息，而這些東西對於一個工程下的多個頁面來可能都是同樣的，不只操做不方便，維護也很麻煩。這裏咱們提出一個概念：頁面結構化繼承。
  繼承你們都很熟悉，而react是能夠用function/class方式來寫組件的，咱們在用class方式寫組件就是繼承自React.Component，那麼對於這些公有東西咱們也能夠封裝成一個組件，經過繼承的方式來獲取這些能力。

建立BasePage	頁面繼承

此處只寫了對於多頁的應用，對於複雜的單頁應用一樣是適用的。

組件劃分

一般咱們在開發一個單頁應用都會抽離一些公共組件，好比title-bar

首頁	博客頁

若是這裏是個多頁應用，一樣是能夠公用的，所以對於多頁應用來講，組件應該是這樣的結構：

狀態管理

每一個頁面的狀態管理一樣是能夠抽離一些公共action和reducer，好比登陸邏輯

模塊化

鑑於腳手架默認是多頁項目，咱們把公共模塊放到外層目錄，減小跟每一個頁面的耦合。

modules
├── common //公用js模塊
├── components //公用組件
├── globalStore //store配置，包含中間件注入
└── page //頁面結構繼承組件

構建

這裏使用feflow的構建器：builder-webpack4，固然這個東西一樣是能夠配置的，甚至能夠根據咱們的官方構建器寫本身的構建器。

項目配置

腳手架是基於feflow的，所以feflow.json文件是feflow項目的基礎配置，包含了一些構建選項，好比輸出目錄，域名，webpack相關等。

{
    "builderType": "builder-webpack4", //構建器類型
    "builderOptions": {
        "product": "", //產品民稱
        "outDir": "dist", //構建輸出目錄
        "minifyHTML": true,
        "minifyCSS": true,
        "minifyJS": true,
        "inlineCSS": true,
        "usePx2rem": true, //是否轉化px
        "remUnit": 37.5, //rem基準
        "remPrecision": 6, 
        "inject": true, 
        "useTreeShaking": true,
        "port": 8001, //項目端口
        "hot": true,
        "externals": [
            {
                "module": "react",
                "entry": "//11.url.cn/now/lib/16.2.0/react.min.js?_bid=3123",
                "global": "React"
            },
            {
                "module": "react-dom",
                "entry": "//11.url.cn/now/lib/16.2.0/react-dom.min.js?_bid=3123",
                "global": "ReactDOM"
            }
        ]
    }
}

其餘

項目默認是不顯示構建相關配置的，一方面，咱們有暴露一些基礎配置項，另外一方面避免多人協做開發更改配置問題，若是你想查看或修改可使用命令展現(不建議修改配置)

feflow eject

優點

多頁支持

generator-ivweb先天支持多頁應用，而不用咱們再去webpack中配置，在開發中只須要在pages下建立多個目錄便可。

頁面適配

項目默認接入rem適配，會自動把px轉成rem，固然，若是某些地方不想被轉化，有兩種方式：

• 修改px寫法
  height: 300Px;
• feflow.json中設置usePx2rem爲false

1. 打包優化

generator-ivweb默認使用builder-webpack4構建，webpack4中所作的一些優化，好比treeShaking都有用到。而且這裏咱們默認給react和react-dom加了外鏈cdn(使用咱們本身的cdn，若是不放心能夠改成本身的cdn)。

1. 內聯語法

   好比一些meta標籤，頁面loading等，均可以經過內聯方式引入
   <!--inline[/assets/inline/meta.html]-->
   還有一些js文件咱們可能也須要內聯到html中提早加載
   <script src="amfe-flexible/index.js?__inline"></script>

2. 多樣化配置文件

   項目默認集成了gitignore、eslint、editorconfig等配置，爲倉庫管理和開發提供了便捷。

├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes

如何使用

# 安裝feflow
npm install feflow-cli -g
# 安裝腳手架
feflow install generator-ivweb
# 啓動項目
feflow init

將來規劃

1. 添加測試用例，提升穩定性。
2. 完善腳手架內容，提供更高效的內容

項目地址

https://github.com/feflow/generator-ivweb， 歡迎你們提issue以便於咱們改進。