cli-plugin-effect v0.1.24

pp-effect 代码影响分析

代码影响分析插件

通过 ast 来得到项目中的文件依赖列表，通过 simple-git 获取修改的文件，得到修改的代码所影响的文件。

安装

# 作为全局指令安装
> pp install effect

# 作为项目依赖安装
> npm i -D @ysf/cli-plugin-effect

作为项目依赖安装时，需要配置 NPM scripts 使用：

// package.json
{
  "scripts": {
    "effect": "pp effect"
  }
}

若未安装@ysf/cli，单独使用effect，配置如下：

// package.json
{
  "scripts": {
    "effect": "ppeffect"
  }
}

在项目根目录下新建ppeffect.json文件

npm run effect init

// or 
npm run ppeffect init

ppeffect.json 配置项

{
  appName:" " //必填，项目名称，需要与在精准平台接入配置的名称保持一致，
  routes:[{            //需要路由影响分析功能时必填
      "path": "/xxx",  //路径
      "componentPath": "xxx/xxx/xxx/index.js" //该路径对应的入口组件文件
    }],
  configFile: "xxx.js" //选配，当使用非pp.config.js和deploy.config.js，传入webpack配置文件地址
  ignoreNodeFiles: [  //选配，分析路由影响文件链路时忽略文件，避免有些路由变量配置在某个文件例如A文件中，A文件又被各类文件引用导致影响路由数据过多不精确；
    "source/*/router.js"
  ],
  ignoreReportFiles:[
    //选配，上报时忽略某些文件，比如utils类型和constants类型，防止数据过多；
    "web/*/constants/*"
  ]
}

基于@ysf/cli使用

1. 默认将当前分支与远端 master 分支进行对比并输出结果，生成代码影响报告，推送到精准测试平台: http://we-qa.qytest.netease.com/insight/webTrace

> pp effect

2. 推荐在开发配置中添加到 pre-commit 中，修改的值等同于 git diff，得到本次修改所影响的范围

# 开发模式, 只针对本次commit所影响的范围，且不会上报精准平台
> pp effect --dev

建议在 husky 中配置，每次提交代码时, 会在命令行中打印本次提交的影响数据

"husky": {
    "hooks": {
      "pre-commit": "pp effect --dev && lint-staged"
    }
  },

配置CICD，可自动上报精准测试平台

stages:  
  - install
  - ppeffect
install:
  resource_group: "$CI_BUILD_REF_NAME"
  stage: install

  script:
    - npm install --registry=http://rnpm.hz.netease.com/
ppeffect:
  resource_group: "$CI_BUILD_REF_NAME"
  stage: ppeffect
  script:
    - npm run pp-effect -- --ciBranchName $CI_COMMIT_BRANCH

3. 指定比较的两个代码分支，oldBranch 默认当前远端 master，newBranch 默认为当前本地所在分支, 可传 commit 值

> pp effect --oldBranch branchA --newBranch branchB

路由收集功能

在ppeffect.json文件，配置路由及其组件路径的映射关系：

{
  "routes": [
    {
      "path": "/admin/xxx",  //路径
      "componentPath": "xxx/xxx/xxx/index.js" //该路径对应的入口组件文件
    }

如果认为手动维护特别麻烦，提供了自动获取路由及其组件路径的映射关系的方法：

自动获取路由及其组件路径的映射关系

安装依赖

# 作为项目依赖安装
> npm i -D @ysf/pp-effect-router @ysf/webpack-component-position-plugin @ysf/react-effect-import react-dev-inspector

• @ysf/webpack-component-position-plugin：webpack插件，组件注入额外的路径属性，建议仅在本地环境开发启用；
• @ysf/react-effect-import：babel 插件，实现自动化接入@ysf/pp-effect-router，建议仅在本地环境开发启用；
• @ysf/pp-effect-router：提供了高阶组件，对 react-router 中的 Router、Switch 组件进行增强，将路由信息上报至服务器(暂不支持 React-RouterV3)；建议仅在本地环境开发启用；
• react-dev-inspector： 用于在dom节点中注入文件路径信息；建议仅在测试服环境启用；

在 deploy.config.js 、pp.config.js或者相应的webpack文件中配置相应的插件

const WebpackComponentPositionPlugin = require('@ysf/webpack-component-position-plugin');
const isLocal = /*本地判断条件，例如 process.env.NODE_ENV === 'local'*/
const isTest = /*测试服环境判断条件 process.env.NODE_ENV === 'development'*/

module.exports = {
  webpack: {
    plugins: [
      ...//some plugins
      //配置webpack插件
      ...(isLocal ? [new WebpackComponentPositionPlugin()] : [])
    ],
    extraBabelPlugins: [ 
      //配置babel插件
      ...(isTest ? ['react-dev-inspector/plugins/babel'] : []),
      ...(isLocal ? [require.resolve('@ysf/react-effect-import')] : [])
    ]
  }
};

路由收集相关指令

//启动本地收集路由服务器命令，该服务器是为了接收项目的路由信息的上报;

> pp effect service

建议配置一专门启动命令，同时启动项目运行与启动路由服务器，例如dev:effect，这样正常的dev命令中无任何pp-effect的入侵代码

  "scripts": {
    "dev": "webpack serve --progress --config webpack.dev.config.babel.js",
    "dev:effect": "concurrently \"NODE_ENV=local webpack serve --progress --config webpack.dev.config.babel.js\" \"npm run pp-effect:service\"",
    "effect": "ppeffect", //使用非@ysf/cli环境
    "pp-effect:service": "ppeffect service" //使用非@ysf/cli环境
  }, 

当有新的路由配置变化时，需要运行dev:effect命令，访问到新路由，进行路由信息上报，更新ppeffect.json

未安装@ysf/cli使用方法

将以上所有的命令,如下修改即可

pp effect => ppeffect

umi中使用

所用相关命令带上 --umi

ppeffect --umi

umi中获取组件和路由的映射关系

由于umi是基于路由开发的，在.umirc.ts文件下添加如下代码，即可自动获取组件和路由的映射关系

const fs = require('fs')
const path = require('path')
if(isDev){//测试或本地开发
  const ppeffectConfig = require('./ppeffect.json')
  function traverseRoutes(routes: any, list: any = []) {
    routes.forEach((item: any) => {
      if (item.path && item.component) {
        list.push({
          path: item.path,
          componentPath: item.component,
          title: item.title,
        })
      }
      if (item.routes) {
        traverseRoutes(item.routes, list)
      } else {
      }
    })
    return list
  }
  let effectRoutes = traverseRoutes(routes)
  fs.writeFileSync('./ppeffect.json', JSON.stringify({ ...ppeffectConfig, routes: effectRoutes }, null, 2))
}

安装react-dev-inspector：

npm i react-dev-inspector --save-dev

.umirc.ts中

export default defineConfig({
  ...//
    extraBabelPlugins:HOST_ENV === 'dev'? ['react-dev-inspector/plugins/babel']:[]
  ..//  
})

可能的问题

问：为什么部分路由无法收集到组件所对应的相对路径？ 答：可能使用的组件为匿名组件，由于 pp-effect 是通过对组件注入额外的相对路径信息，在组件调用时，从组件属性中获取路径信息，对于匿名组件无法注入，故无法获取，可以改成非匿名组件即可。 例如原

export default forwardRef(TargetManage);

改成以下即可

const TargetManage = forwardRef((props, ref) => {
  //something
});
export default TargetManage;

接入手册

https://docs.popo.netease.com/lingxi/74e884fef4224491a7d93840dfc1b289