Enhanced Wechat App Development Toolkit (微信小程序增强开发工具)
项目地址:https://github.com/lyfeyaj/ewa,欢迎试用 ~
厌倦了不停的对比 wepy 或者 mpvue 的特性,间歇性的踩雷,以及 code once, run everywhere
的幻想。只想给小程序开发插上效率的翅膀 ~
更多特性正在赶来 ... 敬请期待 👇
需要 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
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[\\/]/
commonModulePattern: /[\\/]node_modules[\\/]/,
// 是否简化路径,作用于 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: [],
// 嫌不够灵活?直接修改 webpack 配置
webpack: function(config) {
return config;
}
};
@
来代替源代码根目录来引入代码或样式,如 const utils = require('@/utils/util')