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

Enhanced Wechat App Development Toolkit (微信小顺序加强开辟东西)

项目地点：https://github.com/lyfeyaj/ewa，迎接试用 ~

喜好么？或许对您有效？ ☞ 马上去 &＃x2b50;&＃xfe0f; Star &＃x2b50;&＃xfe0f; 一下 ☞

为何开辟这个东西？

厌倦了不断的对照 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. 代码殽杂及高度紧缩，节约包大小

更多特征正在赶来 &＃8230; 敬请期待 &＃x1f447;

• 可跨项目复用的小顺序组件或页面（经由过程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 [args]
敕令：
ewa new 建立新的微信小顺序项目 [别号: create]
ewa init 在现有的小顺序项目中初始化 EWA
ewa start 启动 EWA 小顺序项目及时编译 [别号: dev]
ewa build 编译小顺序静态文件
ewa clean 清算小顺序静态文件
ewa upgrade 晋级 EWA 东西
ewa generate 疾速天生模版 [别号: 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