@打造本身微信小程序工做流

小程序工做流

提出這個思想，小白的學習歷程

在原生小程序的基礎上，咱們打造本身的工做流，咱們想要支持

• scss --- 編譯
• es6+ or ts --- 編譯
• eslint
• stylelint
• tslint?可用eslint 取代
• git
• git 提交管理
• git 提交規範
• git 工做流
• 工具：模板文件生成
• 測試編寫
• 編譯
• 命令行工做流
• 環境與配置
• 編譯的可視化工具
• 文檔編寫

環境變量與配置

目標： 將小程序分爲 3 個環境：development, staging, production

編譯 咱們使用 gulp 編譯這些粗活累活

gulp 的生態，gulp4 的使用

樣式

咱們使用國外流行的 scss,來處樣式部分，目的是使用 bem 命令，bem 配合 預處理器是特別好用的，postcss 來處對咱們樣式作一些後處理，好比添加廠商前綴，以及壓縮代碼，這些在小程序的工具裏面有相似的功能，可是，一直沒有正式的機會在企業裏面使用前端框架，來使用這些工具，在小程序開面就本身搞！

JS / TS

若是是 js 其實能夠不用編譯，可是我麼仍是用babel來處理js。

ts 直接使用本身的編譯工具就行

重點：代碼的風格

爲了方便起見，咱們使用 prettier 的代碼檢查風格，prettier 直接支持 eslint， stylelint 來處理相關代碼的格式問題，prettier 還挺好用的。

git 也是很是重要的

在咱們的工做流裏面 git 扮演者重大的角色，咱們使用git來管理咱們的代碼，一些提交的規範，咱們必須使用在這裏面

文檔部分

咱們在開發一個東西的時候，咱們須要要寫文檔，以便造成好的習慣，咱們要把咱們學習的東西記錄成文字，統一的管理起來，這就是咱們本身的習慣財富。仍是那兩個字，加油。

初步採用 van-docs, 可以將 markdown 文檔轉換成 Vue 文件。

命令行

咱們要習慣使用命令，慢慢的要本身學會寫命令行，這裏推薦看一個微信小程序的模板生成命令行工具，學習如何寫命令行工具，逐步升入咱們的前端，會使用工具的前端纔是真的有效率的前端。

編譯可視化

可視化編譯，就是在編譯的時候，從控制欄知道了編譯器編譯了哪些文件，幹了一些什麼事，如今尚未一個很好的方案。

髒活累活

1. 生成一個頁面，組件
2. 代碼壓縮，文件壓縮
3. 上傳文件，這些東西否應該是能夠自動化的

對於繁瑣前端的知識，工做流程，咱們要創建好本身的工做流處理響應的問題，固然這些都會隨着咱們學習水平的提升，解決問題的能力也會獲得的提升。