◎ assets 與 scripts 拆分

§ 設計目的

1. 合併圖片腳本 SpritesmithPlugin

雪花圖片合併方式，使得資源檔會指向單一檔案夾下，並且輸出至統一位置。

因此圖檔並不適合散落於各檔案夾內。

2. Skin 設計方式

目前專案中，依據用戶需求可更換頁面整體Style，因此Style會依據skin的設計概念區分，並不會完全依照項目、模組方式區分。

因此style設定不適合散落於各檔案夾內。

§ assets 問題與修改

目前的assets雖依據用圖區分，但並沒有依據專案項目 ( Page ) 適度區分局部用圖的樣式、圖檔；這部分仍需與前端程式設計師討論。

◎ page 設計問題

目前專案對於 page 設計相似此專案；於專案內的 Webpack 亦有相同的執行原點。
但與前端部門討論後，有下項討論：

Quest：page應有幾層？

目前專案中，除一項目外，皆只有一個進入點。

pages/[item name]/index.jsx

而特例，則第一層是用於整理共通內容之用。

Ans：

討論結過，有以下兩個設計問題

1、如何使用頁面

依據設計稿，目前多頁面間使用主從關係的iframe，還有直接切換的page redirection。
若頁面層級過深會導致頁面過多而溝通困難。

2、設計Module

在 Multi-page software architecture design 中規範到

pages -> modules -> components

• pages，頁面，Webpack專案建立以頁面為進入點；一個單一頁面會擁有複數的modules、components組成。
• modules，模組，一個模組式由複數的modules、components組成。
• components，單元，一個單元為一個React.Component；若其繪製的元素(Elements)層級過深，應注意是否需重新拆分單元。

其設計目的即是取代多層頁面的不必要性，改用module取代page，避免輸出頁面。

ESLint 錯誤

原因

因為作業系統的段行格式錯誤，導致ESlint無法正確執行。

解決方案

enforce consistent linebreak style (linebreak-style)

結果

實際改寫ESLint檔案也無法解決此問題，對此煩請應如何處理。

rules: {
    ...
    "linebreak-style": ["error", "windows"],
    ...
}

由於目前開發人員多使用Windows環境，這會使得ESLint難以運作。

ESLint 錯誤

原因

今日測試新版本後，因個人用fork使用另外開版本修正src格式，在逐一修補更新與檢閱時，發現此議題。

解決方案

Import Sorting (sort-imports)

議題

在比對新版與舊版的ESLint後，在下知道設定了import迴避大小寫檢查。
這部份就順便提個議題？

基於個人習慣，在C#、Java等語言會有以下習慣。

• 引入類別、類別宣告皆以大寫開頭。
• 變數、函述宣告皆以小寫開頭。
• 傳入參數、區域變數，會依語言規範前綴符號、字詞以供區別變數的生命週期、影響範圍。

不知道是否要訂妥一個宣告與引用規範？