评论

制作了一个可以一键切换小程序后台地址的npm插件

在开发环境、测试环境、生产环境不停地切换小程序地址,是一件相当容易出错的事。于是我制作了一个可以一键切换小程序后台地址的npm插件。

在开发环境、测试环境、生产环境不停地切换小程序后台地址,是一件相当容易出错的事。
看到Vue脚手架可以通过.env、.env[.mode].local来在代码中使用环境变量,于是想着能否把Vue这个功能搬到小程序中。
研究了一天vue-cli的代码,其实际是用到了Webpack及DefinePlugin,但是小程序与Webpack的天生不兼容啊!!!

于是自己写了一个env-replacer工具。

使用方法:

  1. 保证小程序工程是npm的,或者在小程序根目录执行npm init把工程转换为npm工程;
  2. 安装工具:npm i -D env-replacer 或者 yarn add -D env-replacer
  3. 在小程序开发工具里调用env-replacer:右上角->详情->本地设置,编译前预处理:env-replacer & npm run tsc (& npm run tsc是原本预处理命令,如果没有,请去掉,只保留"env-replacer"即可)
  4. 新建config/Config.tpl.ts文件,在其中通过<%= 变量名 %>就可以引用到环境变量,或自定义变量啦!编译后的文件会去掉.tpl变成config/Config.ts(参考node_modules/env-replacer/config/test.tpl.js)
    你可以预处理你想要的任意文件,只要在文件后缀前增加.tpl后缀;
    可以通过.variable.json以及.variable.local.json添加更多变量,提交代码时过滤掉.variable.local.json即可实现不同环境不同配置,参考node_modules/env-replacer/.variable.json;
    也可以处理config目录以外的其它文件,只需要参考node_modules/env-replacer/env-replacer.config.json在根目录下增加自己的配置文件,添加更多路径。

核心代码,都在node_modules/env-replacer/lib/main.js中,欢迎查阅修改、探讨。

最后一次编辑于  09-29  
点赞 2
收藏
评论