首页 > 语言 > JavaScript > 正文

详解基于Wepy开发小程序插件(推荐)

2024-05-06 15:36:18
字体:
来源:转载
供稿:网友

开发

wepy-plugin-autopages

使用 wepy 开发项目时不需要手动配置 app.wpy 下的 config.pages,autopages 插件会自动监控 pages 目录下文件的变化,自动生成更新对应 app.json 下的 pages。

注意:该插件只会对编译文件dist里配置添加,源文件是不会改动的。
注意:我还发现有个问题是他是按命名顺序添加的,所以开发阶段可以用客户端指定路径,但是发布的话还是乖乖手动添加吧

这插件看情况使用吧,如果是个人项目的话我觉得还是值得用的,毕竟每次新增页面都要手动添加很繁琐,但是如果是合作项目开发到某个阶段的时候还是手动填上去吧,因为便于其他人可以知道你项目的所有跳转路径有哪些。

plugins: [ autopages: {}]

wepy-plugin-px2units

将 px 单位转换为 rpx 单位,或者其他单位的 PostCSS插件。

plugins: { px2units: {  filter: /.wxss$/ }},

注意:根据实验所得只对wxss文件起作用,在wxml的行内样式不改变。

//输入.userinfo-nickname { width: 200px; height: 200px;/*no*/ margin: 200rpx;}
//输出.userinfo-nickname { width: 200rpx; height: 200px; margin: 200rpx;}

略微有点鸡肋,虽然会节省一点微不足道的代码量,但是它本身还是有些可能需要用到的配置项的。

配置项 作用
divisor(Number): 除数 转换后的值 等于 pixel / divisor
multiple(Number): 倍数 转换后的值 等于 pixel * multiple
decimalPlaces(Number) 小数点后保留的位数
comment(String) 不转换px单位的注释,默认为 /no/
targetUnits(String) 转换单位,默认值为 rpx

wepy-plugin-replace

文本替换,为 plugins 添加 replace 对象,支持单个或者多个规则,多个规则可以以 Array 或者 Object 实现,filter 的对象为生成后文件的路径, 例如'dist/app.js',每个规则也同时支持多个替换条目,同样是以 Array 或者 Object 实现。

module.exports.plugins = { 'replace': {  filter: /moment/.js$/,  config: {   find: /([/w/[/]a-d/.]+)/s*instanceof Function/g,   replace: function (matchs, word) {    return ' typeof ' + word + " ==='function' ";   }  } }};

用法很简单,指定后缀文件匹配规则替换函数。

生产

就以我的一个项目为例,在不用插件的情况下打包体积是6.04M。

然后看看怎么一步步将其体积减少。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选