wepy根据不同打包命令配置不同的全局变量

朱雀 2022-03-02 14:42 348阅读 0赞

> 背景

公司小程序的技术方案采用的一直的是[wepy框架][wepy]，支持组件化、promise、支持ES6/7 等优点，但是随着业务的增多，出现了不同环境、和不同的埋点域名等一直手动切换，难免出现一些遗漏的问题，故此网上查找资料根据命令**自动化打包**。

> 方案

wepy的框架有个公共的配置文件**wepy.config.js**文件是项目运行的时候统一的配置管理文件、相信vue、react等都有类似的配置文件，这次我们用到的是**【babel-plugin-transform-node-env-inline】**他的作用就是在业务代码中可以找到node的[process][]全局对象,

然后通过我们常用的node对象中的process.env.NODE\_ENV在package.json中去配置不同字段打印不同的域名判断；具体的逻辑如下：

*  安装依赖

![clipboard.png][]

*  查看**package.json**是否安装成功、**wepy.config.js**配置**plugins**

![clipboard.png][clipboard.png 1]

![clipboard.png][clipboard.png 2]

*  创建config文件封装公共的打包方法、抛出域名

![clipboard.png][clipboard.png 3]

*  执行不同的命令、执行不同的环境watch

![clipboard.png][clipboard.png 4]

参考资料：  
[https://blog.csdn.net/sdfujic...][https_blog.csdn.net_sdfujic...]

[https://github.com/Tencent/we...][https_github.com_Tencent_we...]

[https://www.webpackjs.com/plu...][https_www.webpackjs.com_plu...]

[https://www.jianshu.com/p/9c2...][https_www.jianshu.com_p_9c2...]

[https://blog.csdn.net/sdfujic...][https_blog.csdn.net_sdfujic...]

[wepy]: https://tencent.github.io/wepy/
[process]: http://nodejs.cn/api/process.html#process_process_env
[clipboard.png]: /images/20220302/5bbacf688c90465b8331e98751a54f9c.png
[clipboard.png 1]: /images/20220302/73e396f5d03b4b5e906ff40773428323.png
[clipboard.png 2]: /images/20220302/c91db4d3dc0e40ef9be803563a12bd37.png
[clipboard.png 3]: /images/20220302/7fa480842a0d4838a12b9f216ab1e23f.png
[clipboard.png 4]: /images/20220302/395c17cc0a9a430c81fd036ada1af8f9.png
[https_blog.csdn.net_sdfujic...]: https://blog.csdn.net/sdfujichao/article/details/83308211
[https_github.com_Tencent_we...]: https://github.com/Tencent/wepy/wiki/WePY%E6%A0%B9%E6%8D%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E6%9D%A5%E6%94%B9%E5%8F%98%E8%BF%90%E8%A1%8C%E6%97%B6%E7%9A%84%E5%8F%82%E6%95%B0
[https_www.webpackjs.com_plu...]: https://www.webpackjs.com/plugins/define-plugin/
[https_www.jianshu.com_p_9c2...]: https://www.jianshu.com/p/9c29eb09ef1f