fix(taro-cli)：增加taro-cli及运行时框架，版本不一致判断及提示 (#4847)

* 增加taro-cli及运行时框架，版本不一致判断及提示

* 更新说明文档，版本依赖保持一致提前

* 判断不一致时直接中断编译

docs/GETTING-STARTED.md

@@ -60,6 +60,14 @@ Taro 需要运行不同的命令，将 Taro 代码编译成不同端的代码，
 
 ![image](https://storage.360buyimg.com/taro-resource/platforms.jpg)
 
+
+### 保持 `@tarojs/cli` 的版本与各端依赖版本一致
+
+在使用 Taro 进行多端开发中，请确保 Taro CLI 的版本与你项目的依赖版本一致，否则可能会出现编译错误或者运行时错误。
+
+如果你所使用的 Taro CLI 版本为 1.3.9，而项目里使用的依赖版本为 1.3.20，则有可能会出现问题，查询方法请参见本章 "环境及依赖检测" 章节，这时请将你的 Taro CLI 版本更新至项目依赖版本号相同的版本，如果还是出现问题，请向我们提出 [Issue](https://github.com/NervJS/taro/issues/new?assignees=&labels=&template=bug_report.md&title=)。
+
+
 ### 微信小程序
 
 选择微信小程序模式，需要自行下载并打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，然后选择项目根目录进行预览。
@@ -384,10 +392,4 @@ $ npm install -g @tarojs/cli@1.3.9
 $ yarn global add @tarojs/cli@1.3.9
 # OR 安装了 cnpm，使用 cnpm 安装 CLI
 $ cnpm install -g @tarojs/cli@1.3.9
-```
-
-### 保持 `@tarojs/cli` 的版本与各端依赖版本一致
-
-在使用 Taro 进行多端开发中，请保持 Taro CLI 的版本与你项目的依赖版本一致，否则可能会出现编译错误或者运行时错误。
-
-如果你所使用的 Taro CLI 版本为 1.3.9，而项目里使用的依赖版本为 1.3.20，则有可能会出现问题，这时请将你的 Taro CLI 版本更新至项目依赖版本号相同的版本，如果还是出现问题，请向我们提出 [Issue](https://github.com/NervJS/taro/issues/new?assignees=&labels=&template=bug_report.md&title=)。
+```

packages/taro-cli/src/build.ts

@@ -8,7 +8,7 @@ import CONFIG from './config'
 import { BUILD_TYPES, PROJECT_CONFIG } from './util/constants'
 import { IBuildConfig } from './util/types'
 
-export default function build (appPath, buildConfig: IBuildConfig) {
+export default async function build (appPath, buildConfig: IBuildConfig) {
   const { type, watch, platform, port, release, page, component, uiIndex } = buildConfig
   const configDir = require(path.join(appPath, PROJECT_CONFIG))(_.merge)
   const outputPath = path.join(appPath, configDir.outputRoot || CONFIG.OUTPUT_DIR)
@@ -17,6 +17,7 @@ export default function build (appPath, buildConfig: IBuildConfig) {
   } else if (type !== BUILD_TYPES.H5 && (type !== BUILD_TYPES.QUICKAPP || !watch)) {
     Util.emptyDirectory(outputPath)
   }
+  await Util.checkCliAndFrameworkVersion(appPath, type)
   switch (type) {
     case BUILD_TYPES.H5:
       buildForH5(appPath, { watch, port })

packages/taro-cli/src/util/constants.ts

@@ -12,7 +12,8 @@ export const enum processTypeEnum {
   ERROR = 'error',
   WARNING = 'warning',
   UNLINK = 'unlink',
-  REFERENCE = 'reference'
+  REFERENCE = 'reference',
+  REMIND = 'remind'
 }
 
 export interface IProcessTypeMap {
@@ -66,6 +67,10 @@ export const processTypeMap: IProcessTypeMap = {
   [processTypeEnum.REFERENCE]: {
     name: '引用',
     color: 'blue'
+  },
+  [processTypeEnum.REMIND]: {
+    name: '提示',
+    color: 'green'
   }
 }
 

packages/taro-cli/src/util/index.ts

@@ -27,7 +27,8 @@ import {
   BUILD_TYPES,
   CONFIG_MAP,
   REG_STYLE,
-  UX_EXT
+  UX_EXT,
+  NODE_MODULES
 } from './constants'
 import { ICopyArgOptions, ICopyOptions, TogglableOptions } from './types'
 import { callPluginSync } from './npm'
@@ -470,6 +471,29 @@ export function getInstalledNpmPkgPath (pkgName: string, basedir: string): strin
   }
 }
 
+export async function checkCliAndFrameworkVersion (appPath, buildAdapter) {
+  const pkgVersion = getPkgVersion()
+  const frameworkName = `@tarojs/taro-${buildAdapter}`
+  const nodeModulesPath = recursiveFindNodeModules(path.join(appPath, NODE_MODULES))
+  const frameworkVersion = getInstalledNpmPkgVersion(frameworkName, nodeModulesPath)
+  if (frameworkVersion) {
+    if (frameworkVersion !== pkgVersion) {
+      const taroCliPath = path.join(getRootPath(), 'package.json')
+      const frameworkPath = path.join(nodeModulesPath, frameworkName, 'package.json')
+      printLog(processTypeEnum.ERROR, '版本问题', `Taro CLI 与本地安装运行时框架 ${frameworkName} 版本不一致, 请确保版本一致！`)
+      printLog(processTypeEnum.REMIND, '升级命令', `升级到最新CLI：taro update self   升级到最新依赖库：taro update project`);
+      printLog(processTypeEnum.REMIND, '升级文档', `请参考 "常用 CLI 命令"中"更新" 章节：https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html`);
+      console.log(``)
+      console.log(`Taro CLI：${getPkgVersion()}             路径：${taroCliPath}`)
+      console.log(`${frameworkName}：${frameworkVersion}   路径：${frameworkPath}`)
+      console.log(``)
+      process.exit(1)
+    }
+  } else {
+    printLog(processTypeEnum.WARNING, '依赖安装', chalk.red(`项目依赖 ${frameworkName} 未安装，或安装有误！`))
+  }
+}
+
 export function getInstalledNpmPkgVersion (pkgName: string, basedir: string): string | null {
   const pkgPath = getInstalledNpmPkgPath(pkgName, basedir)
   if (!pkgPath) {