Taro中如何在运转时代码中注入node编译时环境变量

折梅问雪 发表于 2023-4-3 22:10:38 | 显示全部楼层 |阅读模式 整、布景介绍 起首咱们瞅瞅taro民网的一弛截图 编译时变质正在运行时中使用 以前正在使用那个框架的时候呢，不竭便很好奇，那里毕竟是怎样完毕，其时尔设想了二个标的目的： 两次编译——那个是尔开端的设法现在瞅是毛病的 babel插件——那个是尔前端时间进修开辟babel-plugin时的设法，实践上能够完毕，可是那里用的没有是 1、process.env.TARO_ENV的完毕道理是甚么呢？ taro 是一个跨仄台的前端开辟框架，它可让开辟者使用一套代码，编译成差别仄台的使用，好比微疑女伶 href="https://www.taojin168.com/cloud/" target="_blank">小法式、付出宝小法式、baidu小法式、H五、React Native 等。 为了完毕这类跨仄台的才气，taro 需要按照差别的目标仄台，天生差别的设置文献战代码。那便需要一个情况变质去标记目前的目标仄台，那个情况变质即是 process.env.TARO_ENV。 process.env.TARO_ENV 是一个正在编译时注进的情况变质，它的值与决于施行编译号令时传进的参数。好比， 假设施行 taro build --type weapp，那末 process.env.TARO_ENV 的值即是 weapp。 假设施行 taro build --type h5，那末 process.env.TARO_ENV 的值即是 h5。 如许，taro 就能够按照 process.env.TARO_ENV 的值，挑选响应的编译器战插件，天生对于应仄台的代码战设置文献。 使用办法： if (process.env.TARO_ENV === 'weapp') {   // 微疑小法式独有的逻辑 } else if (process.env.TARO_ENV === 'alipay') {   //领取 宝小法式独有的逻辑 } else if (process.env.TARO_ENV === 'h5') {   // H5特有 } 复造代码 而如许的功用，道理很简朴，主要使用了webpack的DefinePlugin插件。 2、webpack DefinePlugin的完毕道理 webpack DefinePlugin 的完毕道理是正在编译时将代码中的变质交流为其余值或者表示式。如许能够按照差别的情况或者设置去定造代码的举动，比方启开或者封闭某些特征，切换差别的效劳 URL，大概按照 process.env.NODE_ENV 辨别开辟战消耗情势。 DefinePlugin 的用法是正在 webpack 设置文献中创立一个插件真例，并传进一个工具，工具的每一个键皆是一个标记符或者多个以 . 跟尾的标记符，工具的每一个值皆是一个字符串、一个布我值、一个数字、一个工具或者一个函数。假设值是一个字符串，它会被当作代码片断去使用；假设值没有是字符串，它会被变换成字符串（包罗函数）。假设值是一个工具，它的统统键城市使用差异的办法界说。假设键有 typeof 前缀，它不过对于 typeof 挪用界说的。 以process.env.TARO_ENV为例上面的设置文献界说了一点儿全部变质： // webpack.config.js const webpack = require('webpack'); module.exports = {   // ...   plugins: [     new webpack.DefinePlugin({       'process.env.TARO_ENV': JSON.stringify(process.env.TARO_ENV),     }),   ], }; 复造代码 如许，正在代码中使用process.env.TARO_ENV时编译时 //方才的代码假定 process.env.TARO_ENV的值是weapp if (process.env.TARO_ENV === 'weapp') {   // 微疑小法式独有的逻辑 } else if (process.env.TARO_ENV === 'alipay') {   //领取 宝小法式独有的逻辑 } else if (process.env.TARO_ENV === 'h5') {   // H5特有 } //编译后的成果 if ( 'weapp' === 'weapp') {   // 微疑小法式独有的逻辑 } else if ( 'weapp' === 'alipay') {   //领取 宝小法式独有的逻辑 } else if ( 'weapp' === 'h5') {   // H5特有 } 复造代码 3、归纳 process.env.TARO_ENV。那个变质是Taro正在编译时使用webpack DefinePlugin注进到代码中的，用去暗示目前的目标仄台。颠末那个变质，咱们能够正在代码中截至一点儿前提鉴别，完毕差别仄台的差别化处置。 道理仍是相称简朴的，假设对于您有辅佐，省事面赞减存眷吧，以后会连续分享前端手艺的。

回复 使用道具 举报 提升卡 置顶卡 沉默卡 喧嚣卡 变色卡 千斤顶 照妖镜