xiaoc的博客

Taro 升级 2.x 最新版本

# Taro 升级 2.x 最新版本

# 环境

taro：v2.1.16
node：v10.16.3

taro 官网 (opens new window)

taro@2.x 迁移升级文档 (opens new window)

# 版本升级

建议在升级前将 package.json 文件内容保存备份
在升级中，可能会出现 packcage.json 中依赖包丢失情况

# 升级 @taro/cli

# 有两种升级版本的方式 一种是全局升级，一种是只升级某个项目的，这里只升级单个项目内的 Taro 版本

# 单独升级项目内的 Taro 版本（npm 方式）
npm install --save-dev @tarojs/cli@2.2.15

只升级单个项目内的 Taro 版本，这样做的好处是全局的 Taro 版本还是原来的版本，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI

# 升级项目依赖

# 进入项目目录 打开命令行
# npm 方式 升级项目 Taro 相关依赖
node ./node_modules/.bin/taro update project 2.2.15 (请修改为 Taro 2.x 最新版本)

# 安装新增依赖

Taro 2.0 新增了 @tarojs/mini-runner 作为小程序的编译依赖，所以你需要将它安装在你的项目

# 安装 @tarojs/mini-runner
npm install --save-dev @tarojs/mini-runner@2.2.15

升级安装到这基本就都升级完成了
2.2.x 以后新增了一些优化项，下面记录一些配置方法

# 配置项

# Js 代码压缩

Taro@2.x JS 代码压缩文档 (opens new window)

# 本次使用 uglifyjs
# npm i --D uglifyjs-webpack-plugin
npm i --D @tarojs/plugin-uglify


// config/index  文件中配置
const config = {
  // 注册
  plugins: ['@tarojs/plugin-uglify'],
  // 开启 js 压缩
  uglify: {
    enable: true,
    config: {
      // 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
    },
  },
}

# Css 样式压缩

Taro@2.x Css 样式压缩文档 (opens new window)

如果使用了 sass ,需安装 @tarojs/plugin-sass

# 安装 @tarojs/plugin-sass 插件
npm i --D @tarojs/plugin-sass

// config/index  文件中配置
const config = {
  // 注册
  plugins: ['@tarojs/plugin-sass'],
  // 开启 css 压缩
  csso: {
    enable: true,
    config: {
      // 配置项同 https://github.com/css/csso#minifysource-options
    },
  },
}

# 分析打包体积

使用 webpack-bundle-analyzer 插件 (opens new window)

# 安装 analyzer
npm install webpack-bundle-analyzer -D

// config/index
const config = {
  mini: {
    // 配置 analyzer 开启打包
    webpackChain(chain, webpack) {
      chain.plugin('analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
    },
  },
}

# 微信小程序持续集成

小程序开发文档 命令行 V2 (opens new window)

开发者工具提供了命令行与 HTTP 服务两种接口供外部调用 开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作 本次使用 命令行方式 执行自动构建提交

#!/bin/bash

# 确保脚本抛出遇到的错误
set -e

# 查看node 版本
node -v

# 查看npm 版本
npm -v

# 获取微信开发者工具-命令行工具位置(配置为自己的 微信开发者工具路径)
cli=/g/xxx/xxx/微信web开发者工具/cli.bat

# 设置项目路径 (配置为自己的 项目路径 加上打包后生成的目录如：dist)
project_path=/g/xxx/xxx/dist


# 设置版本号
version=3.3.6.8

# 打包构建
echo -e '\033[32m打包生成部署文件...\033[0m'

# 执行构建(可配置为自己的 构建命令)
npm run build:sit:weapp


# 获取git提交信息
echo -e '\033[32m获取Git提交信息...\033[0m'

# 获取最新一次的 git commit 信息
head_commit_info=`git log --pretty=format:“%s” "HEAD" -1`

# 获取最新一次的 git author 信息
head_commit_author=`git log --pretty=format:“%an” "HEAD" -1`

# 获取最新一次的 git 提交日期
head_commit_date=`git log --pretty=format:“%cd” "HEAD" -1`

# 打印查看
echo $head_commit_info
echo $head_commit_author
echo $head_commit_date

echo -e '\033[32m执行上传...\033[0m'

# 获取当前时间
# time=$(date "+%Y-%m-%d %H:%M:%S")

# 调用微信开发者工具命令行方式 执行上传
$cli upload --project $project_path -v $version -d $head_commit_info

# 调用微信开发者工具命令行方式 执行预览
# $cli preview --project /g/xiaoc1103/code/gitlab/wx-ci-test/dist

Vue 笔记