微信小程式組件化開發框架Labrador的特性安裝步驟

特性

使用Labrador框架可以讓微信開發者工具支援載入海量NPM套件

支援ES6/7標準程式碼，使用async/await能夠有效避免回呼地獄

元件重複使用，對微信小程式框架進行了二次封裝，實現了元件重複使用和巢狀

自動化測試，非常容易編寫單元測試腳本，不經任何額外配置即可自動化測試

使用Editor Config及ESLint標準化程式碼風格，方便團隊協作

安裝

#首先您的系統中安裝Node.js和npm v3 下載Node.js，然後執行下面的命令將全域安裝Labrador命令列工具。

npm install -g labrador-cli

初始化項目

mkdir demo           # 新建目录
cd demo              # 跳转目录
npm init             # 初始化npm包
labrador init        # 初始化labrador项目

專案目錄結構

demo                 # 项目根目录├── .labrador        # Labrador项目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 语法检查配置├── package.json
├── dist/            # 目标目录├── node_modules/
└── src/             # 源码目录
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用组件目录
    ├── pages/       # 页面目录
    └── utils/

#注意 dist目錄中的所有檔案是由labrador命令編譯生成，請勿直接修改

設定開發工具

專案初始化後使用WebStorm或Sublime等你習慣的IDE開啟專案根目錄。然後開啟 微信web開發者工具 新建項目，本地開發目錄選擇 dist 目標目錄。

開發流程

在WebStorm或Sublime等IDE中編輯 src 目錄下的原始碼，然後在專案根目錄中執行labrador build 命令建置項目，然後在微信web開發者工具 的偵錯介面中點選左側選單的 重啟 按鈕即可查看效果。

我們正在開發中， 微信web開發者工具 只用來做除錯和預覽，不要在 微信web開發者工具 的編輯介面修改程式碼。

微信web開發者工具 會偶爾出錯，表現為點選 重啟 按鈕沒有反應，並調試控制台輸出大量的無法require檔案的錯誤，編輯介面中程式碼檔案不顯示。這是因為 labrador build 指令會更新整個 dist 目錄，而 微信web開發者工具 在監控程式碼改變時會出現異常，遇到這種情況只需要關掉 微信web開發者工具 再啟動即可。

我們也可以使用 labrador watch 指令來監控 src 目錄下的程式碼，當發生變更後自動構建，不用每一次編輯程式碼後手動執行labrador build 。

所以最佳的姿勢是：

在專案中執行 labrador watch

在WebStorm中編碼，儲存

切換到 微信web開發者工具中偵錯、預覽

再回到WebStorm中編碼

以上是微信小程式組件化開發框架Labrador的特性安裝步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！