Taro增加高德环境变量以及gulp压缩

1,944 阅读2分钟

前言

在taro框架中内置了区分平台的环境变量 请戳我,唯独就是没有区分高德的环境变量。怎样来解决这个平台差异,创建全局环境变量成了一个急需解决的问题。首先想到的是 config/index 中的 defineConstants,在编译的时候能及时获取到所编译的平台类型,是不是就解决了这个环境变量的问题。

1.增加高德环境变量

1.先安装依赖

    npm i cross-env -D

2.增加全局变量

//config/index.js文件
defineConstants: {
    TARO_PLAT:process.env.TARO_PLAT
},

3.npm 脚本命令修改

"scripts": {
    "build:weapp": "cross-env TARO_PLAT=weapp taro build --type weapp",
    "build:swan": "cross-env TARO_PLAT=swan taro build --type swan",
    "build:alipay": "cross-env TARO_PLAT=alipay taro build --type alipay",
    "build:amap": "cross-env TARO_PLAT=amap taro build --type alipay",
    "build:tt": "cross-env TARO_PLAT=tt taro build --type tt",
    "build:h5": "cross-env TARO_PLAT=h5 taro build --type h5",
    "build:rn": "cross-env TARO_PLAT=rn taro build --type rn",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:amap": "npm run build:amap -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "zip:alipay": "npm run build:alipay && gulp alipay",
    "zip:amap": "npm run build:amap && gulp amap"
},

这样就可以愉快的使用 TARO_PLAT 区分高德和支付宝了!!!

gulp压缩zip,便于提交测试

安装依赖 npm i gulp gulp-zip dayjs del -D

const path = require('path');
const gulp = require('gulp');
const zip = require('gulp-zip');
const dayjs = require('dayjs');
const del = require('del');
const distFile = 'dist'; //打包目录
const packageInfo = require("./package.json");

let platform = process.argv[process.argv.length - 1] || 'weapp';

const gulpZip = async () => {
  //删除上次打包的zip文件
  const deletedPaths = await del(['*.zip'])
  console.log(deletedPaths)
  return gulp.src(path.resolve(distFile + '/**'))
    .pipe(zip('小程序' + platform + '-' + packageInfo.version
    + '-' + dayjs().format('YYYY-MM-DD HH-mm-ss') + '.zip'))
    .pipe(gulp.dest('./'))
}

//压缩打包文件
gulp.task(platform, gulpZip)

// gulp.task--定义任务
// gulp.src--找到需要执行任务的文件
// gulp.dest--执行任务的文件的去处
// gulp.watch--观察文件是否发生变化

至于 npm 脚本压缩命令请参考上方脚本修改!!!