wxapp boilerplate

wxapp-boilerplate

使用webpack , babel , scss開發的微信／支付寶小程式專案鷹架

功能

• 支援引用node_modules模組
• 支援透過配置alias來避免../../../之類的模組引用
• 透過babel支援更豐富的ES6相容，包括async/await
• 內建promise和lodash （ lodash按需引入對應模組，不會全部引入）
• 使用scss編寫.wxss文件，內建了一些有用的mixins和extends
• 提供__DEV__和process.env.NODE_ENV全域常數輔助開發
• 支援自動編譯為微信和支付寶小程序
• 提供__WECHAT__和__ALIPAY__全域常數來判斷是微信小程式或支付寶小程序
• 透過命令列快速建立微信小程式頁面
• 支援在production環境下壓縮程式碼

開始使用

確保安裝了Node.js (>= v4.2 ) 和yarn 或npm

1. git clone此項目
2. 透過命令列工具cd到這個目錄，執行yarn安裝依賴模組
3. 執行yarn start開始開發
4. 透過微信開發者工具，新增dist/wechat目錄到專案上

內建指令

• yarn start啟動webpack開發微信小程式項目，能監聽檔案變化自動重新編譯
• yarn start:alipay啟動webpack開發支付寶小程式項目，能監聽檔案變更自動重新編譯
• yarn build編譯產生production環境的程式碼到dist/wechat和dist/alipay
• yarn lint:build執行yarn build指令，並使用eslint 和stylelint 來校驗程式碼規範
• yarn prettier執行prettier來格式化src 目錄下的程式碼
• yarn create-page快速建立微信小程式頁面（更多create-page的用法，請查看create-wxapp-page）

相容於微信和支付寶小程序

開發者可以選擇一套原始碼來開發微信和支付寶小程序，這腳手架支援自動編譯wxml為axml ，轉換wx:attr為a:attr ，轉換API wx為my ，反之亦然。但個別介面在平台上也略有差異，開發者可以透過__WECHAT__或__ALIPAY__來動態處理。

文件複製

如果wxml或axml有動態引入檔案（如src="{{'images/' + type + '.png'}}" ），webpack 將無法動態引入，因此會導致打包後可能會出現缺失檔案問題。

遇到這種情況，可以透過copy-webpack-plugin 解決，把整個images目錄複製到dist下即可。

本腳手架已經內建這個插件。為了方便使用，也可以透過在package.json裡增加一個copyWebpack的字串數組，來實現目錄或檔案自動複製。例如：

package.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

透過執行yarn start或yarn build ， src/images和src/icons目錄會自動複製到dist/wechat/images和dist/wechat/icons目錄（支付寶小程式同理）。

更新日誌

Changelog

相關項目

• create-wxapp-page
• react-lib-boilerplate
• front-end-lib-boilerplate
• node-cli-boilerplate

License

MIT