一款小程式增強開發工具 – EWA

lyfeyaj發表於2018-07-16

EWA (微信小程式增強開發工具)

Enhanced Wechat App Development Toolkit (微信小程式增強開發工具)

專案地址：https://github.com/lyfeyaj/ewa，歡迎試用 ~

喜歡麼？或者對您有用？ ☞ 立即去 ⭐️ Star ⭐️ 一下 ☞

為什麼開發這個工具？

厭倦了不停的對比 wepy 或者 mpvue 的特性，間歇性的踩雷，以及 code once, run everywhere 的幻想。只想給小程式開發插上效率的翅膀 ~

功能特性

  1. Async/Await 支援
  2. Javascript ES2017+ 語法
  3. 原生小程式所有功能，無需學習，極易上手
  4. 微信介面 Promise 化
  5. 支援安裝 NPM 包
  6. 支援 SCSS(或 LESS) 以及 小於 16k 的 background-image
  7. 支援 source map, 方便除錯
  8. 新增新頁面或新元件無需重啟編譯
  9. 允許自定義編譯流程
  10. 自動相容舊版本手機中的顯示樣式
  11. 支援 WXSS 和 SCSS(或 LESS) 混用
  12. 程式碼混淆及高度壓縮，節省包大小

更多特性正在趕來 … 敬請期待 ?

  • 可跨專案複用的小程式元件或頁面（通過NPM包管理）
  • Redux 支援
  • Mixin 支援

安裝

需要 node 版本 >= 8

npm i -g ewa-cli 或者 yarn global add ewa-cli

如何使用

建立新專案

ewa new your_project_name

整合到現有小程式專案，僅支援小程式原生開發專案轉換

注意：使用此方法，請務必對專案程式碼做好備份！！！

cd your_project_dir && ewa init

啟動

執行 npm start 即可啟動實時編譯

執行 npm run build 即可編譯線上版本（相比實時編譯而言，去除了 source map 並增加了程式碼壓縮混淆等，體積更小）

上述命令執行成功後，可以看到本地多了個 dist 目錄，這個目錄裡就是生成的小程式相關程式碼。

使用微信開發者工具選擇 dist 目錄開啟，即可預覽專案

目錄結構

├── .ewa                         特殊佔位目錄，用於檢查是否為 ewa 專案
├── dist                         小程式執行程式碼目錄（該目錄由ewa的start 或者 build指令自動編譯生成，請不要直接修改該目錄下的檔案）
├── node_modules                 外部依賴庫
├── src                          程式碼編寫的目錄（該目錄為使用ewa後的開發目錄）
│   ├── components               小程式元件目錄
│   ├── pages                    小程式頁面目錄
│   │   ├── index
│   │   │   ├── index.js
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── logs
│   │       ├── logs.js
│   │       ├── logs.json
│   │       ├── logs.wxml
│   │       └── logs.wxss
│   ├── templates                小程式模版目錄
│   ├── utils
│   │   └── util.js
│   ├── app.js                   小程式入口檔案
│   ├── app.json                 小程式全域性配置檔案
│   ├── app.wxss                 小程式全域性樣式檔案
│   └── project.config.json      微信開發者工具小程式專案配置檔案
├── ewa.config.js                ewa 配置檔案
├── .gitignore
├── .eslintrc.js                 eslint 配置
└── package.json

命令列

ewa <cmd> [args]

命令：
  ewa new <projectName>       建立新的微信小程式專案           [別名: create]
  ewa init                    在現有的小程式專案中初始化 EWA
  ewa start                   啟動 EWA 小程式專案實時編譯         [別名: dev]
  ewa build                   編譯小程式靜態檔案
  ewa clean                   清理小程式靜態檔案
  ewa upgrade                 升級 EWA 工具
  ewa generate <type> <name>  快速生成模版                          [別名: g]

選項：
  --version, -v  當前版本號                                               [布林]
  --help, -h     獲取使用幫助                                             [布林]

微信介面 Promise 化

const { wx } = require(`ewa`);

Page({
  async onLoad() {
    let { data } = await wx.request({ url: `http://your_api_endpoint` });
  }
})

配置

ewa 通過 ewa.config.js 來支援個性化配置。如下所示：

// ewa.config.js

module.exports = {
  // 公用程式碼庫 (node_modules 打包生成的檔案)名稱，預設為 vendors.js
  commonModuleName: `vendors.js`,

  // 通用模組匹配模式，預設為 /[\/](node_modules|utils|vendor)[\/].+.js/
  // 如需新增多個資料夾，可自定義正則，如 /[\/](node_modules|utils|custom_dirname)[\/].+.js/
  commonModulePattern: /[\/](node_modules|utils|vendor)[\/].+.js/,

  // 是否簡化路徑，作用於 page 和 component，如 index/index.wxml=> index.wxml，預設為 false
  simplifyPath: false,

  // 資料夾快捷引用
  aliasDirs: [
    `apis`,
    `assets`,
    `constants`,
    `utils`
  ],

  // 需要拷貝的檔案型別
  copyFileTypes: [
    `png`,
    `jpeg`,
    `jpg`,
    `gif`,
    `svg`,
    `ico`
  ],

  // webpack loader 規則
  rules: [],

  // webpack 外掛
  plugins: [],

  // 開發環境下是否自動清理無用檔案，預設為 true
  autoCleanUnusedFiles: true,

  // css 解析器，sass 或者 less，預設為 sass
  cssParser: `sass`,

  // 嫌不夠靈活？直接修改 webpack 配置
  webpack: function(config) {
    return config;
  }
};

常見問題 & Tips

  1. 可以使用 @ 來代替 原始碼根目錄 來引入程式碼或樣式，如 const utils = require(`@/utils/util`)
  2. WXSS 中可以直接編寫 SCSS 樣式程式碼
  3. WXSS 或 SCSS 中引用絕對路徑需要在路徑前加 ~ 符號，如：@import "~@/assets/styles/common.scss";，具體原因參見: sass-loader

相關文章