一款小顺序加强开发工具 - EWA

2023年11月25日 215次阅读 来源: lyfeyaj

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
    原文作者：lyfeyaj
    原文地址: https://segmentfault.com/a/1190000015653494
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞