@pareext/cli-service v0.7.0

@pare/cli-service 依赖包管理器

关于依赖包管理器

• 统一项目启动命令
• 统一管理依赖包
• 统一项目技术选型
• 静态资源 CDN 配置
• 项目环境变量配置
• 支持 Typescript
• 支持 Mobx Dva
• 支持 less sass (框架会根据文件名标识*.module.(less|scss|sass|css)来实别是否开启 CSS MODULES 功能)

项目启动命令

• 命令 npm run dev 开发 npm run build 打包 npm run analyzer 性能分析

• 环境变量配置文件读取

  • npm run dev ** 开发时读取项目中的.env.**文件，默认读取 .env.dev 文件
  • npm run build **打包时读取项目中的.env.**文件，默认读取 .env.build 文件
  • npm run analyzer ** 性能分析时读取项目中的.env.**文件，默认读取 .env.analyzer 文件

  例子：
  npm run build stg1
  打包时会读取.env.stg1环境变量配置文件

链接库 Webpapck DllPlugin

• HTML 中引入

  • 开发时 引用 vendor.dev.dll.js

  • 生产时 引用 vendor.dll.js

• 包含依赖包

  'react',
  'react-dom',
  'react-router-dom',
  'mobx',
  'mobx-react',
  'axios',
  'antd',
  'history',
  'moment',
  'react-content-loader',
  '@loadable/component',
  'react-app-polyfill/ie11',
  'react-app-polyfill/stable'

配置

环境变量配置

环境变量配置，统一在 .env.** 文件中配置，对应发布环境可以建多个文件。 对应变量多个值需要用 | 符号隔开

例子：
SM2_SWITCH=true
EYE_SWITCH_APPID_VN_VC=true|xxxx001|TEST|1.0.0

• 开发环境变量配置（相关配置同 webpack-dev-server）
  • HOST 配置主机（默认 127.0.0.1）
  • PORT 端口号（默认 3000）
  • BROWSER 是否自动打开浏览器（默认 none）
• PUBLIC_PATH 公共路径（默认 /） 设置值会修改 devServer中的publicPath 和 webpack output中的publicPath
• OUT_PATH 输出目录（默认 ./dist）

• JS_ESLINT 开发时开启 eslint 检查 （默认 true）

• ANTD_STYLE_SWITCH 是否引入 CDN Antd 样式（默认 false）

  例子：
  ANTD_STYLE_SWITCH=true（项目不在会按需加载antd样式）

• INCLUDE_REGEX_STRING 不过滤 node_modules 中的资源 为了优化 webpack 打包速度，框架过滤了 node_modules 中文件检索。有时需要引用 node_modules 某个文件可通过此项设置避免过滤，多个值用|隔开。

  例子：
  INCLUDE_REGEX_STRING=braft-editor\\dist\\index.css
  
  注：路径必须 用 \ 进行转义

• SPRITER_SVG 指定 **.svg 使用 svg-sprite-loader 来批量加载 SVG（默认 .sprite.svg 文件通过 svg-sprite-loader 来处理 SVG）

  例子：
  SPRITER_SVG=kyr

  // src/app.js
  import '@/components/svgIcon/svg.js';

  // components/svgIcon/svg.js
  const requireAll = requireContext => requireContext.keys().map(requireContext);
  const req = require.context('@/assets/svg', false, /.kyr\.svg$/);
  requireAll(req);

  // components/svgIcon/index.jsx
  import React from 'react';
  import CSS from './svg.module.scss';
  // props: svgClassName,自定义calssName; iconName,svg文件名(不包含'-container')
  export default class SvgIcon extends React.Component {
    get svgClass() {
      if (this.props.svgClassName) {
        return CSS.icon + ' ' + this.props.svgClassName;
      } else {
        return CSS.icon;
      }
    }
    render() {
      return (
        <svg className={this.svgClass} style={this.props.style || {}}>
          <use xlinkHref={`#${this.props.iconName}.kyr`} />
        </svg>
      );
    }
  }

  // src/pages/demo.jsx
  import React, { Component } from 'react';
  import SvgIcon from '@/components/svgIcon';
  class SvgIconDemo extends Component {
    render() {
      return <SvgIcon iconName="arrow" />;
    }
  }
  export default SvgIconDemo;

• WEBPACK_SVG 指定 **.svg 使用 @svgr/webpack 来解析 SVG（默认 .webpack.svg 文件通过 @svgr/webpack 来处理 SVG）

  例子：
  WEBPACK_SVG=antd

  import { Icon } from 'antd';
  import MessageSvg from 'path/to/message.antd.svg';
  
  ReactDOM.render(<Icon component={MessageSvg} />, mountNode);

  Icon 中的 component 组件的接受的属性如下：

  字段	说明	类型	只读值
  width	svg 元素宽度	string|number	'1em'
  height	svg 元素高度	string|number	'1em'
  fill	svg 元素填充的颜色	string	'currentColor'
  className	计算后的 svg 类名	string	-
  style	计算后的 svg 元素样式	CSSProperties	-

• 打包自动压缩 ZIP 文件

  • ZIP_SWITCH 是否开启打包生成 zip 文件（true，false）
  • ZIP_NAME 配置 zip 文件名（默认 dist.zip）
  • ZIP_PATH 配置输出路径（默认 ./）
  • ZIP_PATH_PREFIX 配置 zip 包解压目录前缀（默认 无）

  例子：
  ZIP_SWITCH=true (开启zip压缩)
  ZIP_NAME=build（zip包名 build.zip ）
  ZIP_PATH=../（当前项目根目录上一级）
  ZIP_PATH_PREFIX=kyr（解压后为 kyr/打包文件）

• 第三方库引入相关配置 不动产 CDN 静态资源服务支持 http，https 协议。

  1. 测试域名 pare-staic-stg1.pingan.com
  2. 生产域名 pare-staic.pingan.com
  3. 资源路径 http://pare-inf-dev.paic.com.cn:8080/browse/@pare/pare_inf_cdn@1.0.0/src/
  4. 使用资源 在对应环境地址后加上 /cdn/资源路径

  例子：
  资源路径 /ant/antd.min.css
  使用方法 //pare-staic.pingan.com/cdn/ant/antd.min.css

  • SM2_SWITCH 是否引入 SM2 加密库（默认 false）
    • 库名：nion-sm2-1.0.js

  • EYE_SWITCH_APPID_VN_VC 是否引入天眼（默认 不引用）

    • 库名： 测试 h5sdk_test_s_3.0.0.js 生产 h5sdk_3.0.0.js

    值说明：需要配置四个值用|隔开

    • 值 1：是否启用（true，false）
    • 值 2：KEY
    • 值 3：标识
    • 值 4：版本

    例子：
    EYE_SWITCH_APPID_VN_VC=true|5BC8DE5541B9DED3DEAAB2F3F9C54F0B|TEST|1.3.0

  • AMAP_SWITCH_KEY_PARAMS 高德地图（默认 不引用）

    • 库地址：//webapi.amap.com/maps?v=1.4.15&key=

    值说明：需要配置三个值用|隔开

    • 值 1：是否启用（true，false）
    • 值 2：KEY（默认 a365d75a3b7a9b8c3c58e05b6f1cd844）
    • 值 3：参数（默认空 如：&plugin=AMap.ToolBar）

    例子：
    AMAP_SWITCH_KEY_PARAMS=true|''|&plugin=AMap.ToolBar

  • BMAP_SWITCH_KEY_PARAMS 百度地图（默认 不引用）

    • 库地址：//api.map.baidu.com/api?v=3.0&ak=

    值说明：需要配置三个值用|隔开

    • 值 1：是否启用（true，false）
    • 值 2：KEY（默认 sFtkACzXV85sQHrSO9BBzmnDXQzCj4Fy）
    • 值 3：参数（默认空 如：&type=webgl）

  • LIBRARY_CSS_LIST 在 HEAD 中加载不动产 CND、本地、外网 CSS 库

    • 配置多个值，需用|隔开
    • 使用不动产 CDN 在文件后面加 ?cdn 标识
    • 本地文件必须放在 项目 public 文件中

    例子：
    LIBRARY_CSS_LIST=/antv/g2.css?cdn|/lib/agent.css|https://www.baidu.com/style.css

  • LIBRARY_JS_LIST 在 BODY 中加载不动产 CND、本地、外网 JS 库

    • 配置多个值，需用|隔开
    • 使用不动产 CDN 在文件后面加 ?cdn 标识
    • 本地文件必须放在 项目 public 文件中

    例子：
    LIBRARY_JS_LIST=/antv/g2.min.js?cdn|/lib/agent.min.js|https://www.baidu.com/jquery.js

  • SCRIPT_STRING_BEFORE 在 HEAD 中插入 JS 代码块

    • 值：JS 字符串

    例子：
    SCRIPT_STRING_BEFORE=var test=1;

  • SCRIPT_STRING_AFTER 在 BODY 底部插入 JS 代码块
    • 值：JS 字符串

    例子：
    SCRIPT_STRING_AFTER=window.GC.Spread.Sheets.LicenseKey = '126923788855387#A0tIZO6ITMiojIklkI1pj';

webpack 配置

框架只提供 webpack.config.js 简单版配置。

• proxy （同 webpack-dev-server devServer 中的 proxy）
• entry （同 webpack 的 entry）
• resolve （同 webpack 的 resolve）
• modifyVars （同 less-loader options 中的 modifyVars）
• typescript （同 @babel/preset-typescript ）
• node（同 webpack 中的 node）
• externals（同 webpack 中的 externals）

// 例子：
const path = require('path');
module.exports = {
  proxy: {
    '/api': 'http://kyr.paic.com.cn'
  },
  entry: {
    main: path.join(__dirname, `src/index.js`)
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  modifyVars: {
    'breadcrumb-font-size': '12px'
  },
  typescript: {
    isTSX: true,
    allExtensions: true
  },
  node: {
    fs: 'empty'
  },
  externals: {
    './cptable': 'var cptable'
  }
};

业务代码中使用环境变量

在.env.** 文件配置项都可以在业务代码中引用，注入变量为process.env。

// .env.build
REACT_APP_STAGE=development
REACT_APP_PERMISSION=false

// js
const { REACT_APP_STAGE, REACT_APP_PERMISSION, MICRO_ID, NODE_ENV } = process.env;
console.log(process.env);

依赖包版本

"@antv/data-set": "0.10.2",
"@antv/g2": "3.5.11",
"@antv/g2-plugin-slider": "2.1.1",
"@babel/core": "7.7.7",
"@babel/plugin-proposal-class-properties": "7.0.0",
"@babel/plugin-proposal-decorators": "7.0.0",
"@babel/plugin-syntax-dynamic-import": "7.7.4",
"@babel/plugin-transform-runtime": "7.7.6",
"@babel/polyfill": "7.7.0",
"@babel/preset-env": "7.7.7",
"@babel/preset-react": "7.7.4",
"@babel/preset-typescript": "7.7.7",
"@babel/runtime": "7.7.7",
"@babel/runtime-corejs2": "7.7.7",
"@loadable/component": "5.11.0",
"@svgr/webpack": "5.0.0",
"antd": "3.26.17",
"antd-dayjs-webpack-plugin": "0.0.7",
"array-move": "2.2.1",
"autoprefixer": "9.7.3",
"axios": "0.19.0",
"babel-eslint": "10.0.3",
"babel-loader": "8.0.6",
"babel-plugin-import": "1.13.0",
"base-64": "0.1.0",
"bizcharts": "3.5.6",
"bizcharts-plugin-slider": "2.1.1-beta.1",
"braft-editor": "2.3.8",
"bundle-loader": "0.5.6",
"chalk": "3.0.0",
"classnames": "2.2.6",
"clean-webpack-plugin": "3.0.0",
"compressing": "1.5.0",
"compression-webpack-plugin": "3.0.1",
"copy-webpack-plugin": "5.1.1",
"core-js": "3.6.0",
"css-element-queries": "1.2.3",
"css-loader": "3.4.0",
"d3": "5.14.2",
"decimal.js": "10.2.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"draft-js-export-html": "1.4.1",
"dva": "2.4.1",
"dva-loading": "3.0.20",
"echarts": "4.5.0",
"echarts-for-react": "2.0.15-beta.1",
"eslint": "6.8.0",
"eslint-config-airbnb": "18.0.1",
"eslint-loader": "3.0.3",
"eslint-plugin-import": "2.19.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-react": "7.17.0",
"eslint-plugin-react-hooks": "1.7.0",
"file-loader": "5.0.2",
"file-saver": "2.0.2",
"fs-extra": "8.1.0",
"happypack": "5.0.1",
"history": "4.10.1",
"html-webpack-plugin": "3.2.0",
"html2canvas": "1.0.0-rc.5",
"js-base64": "2.5.1",
"js-cookie": "2.2.1",
"jsdoc": "3.6.3",
"jsencrypt": "3.0.0-rc.1",
"jszip": "3.2.2",
"less": "3.10.3",
"less-loader": "5.0.0",
"lodash": "4.17.15",
"lodash-decorators": "6.0.1",
"lottie-web": "5.5.10",
"memoize-one": "5.1.1",
"mini-css-extract-plugin": "0.9.0",
"mobx": "4.15.4",
"mobx-react": "6.1.4",
"mockjs": "1.1.0",
"moment": "2.24.0",
"moment-recur": "1.0.7",
"nprogress": "0.2.0",
"numeral": "2.0.6",
"omit.js": "1.0.2",
"optimize-css-assets-webpack-plugin": "5.0.3",
"ora": "4.0.3",
"path-to-regexp": "6.1.0",
"postcss-loader": "3.0.0",
"prettier": "1.19.1",
"prop-types": "15.7.2",
"qs": "6.9.1",
"rc-drawer-menu": "1.1.0",
"rc-form": "2.4.11",
"rc-mentions": "1.0.0-alpha.3",
"rc-texty": "0.2.0",
"react": "16.12.0",
"react-app-polyfill": "1.0.5",
"react-color": "2.17.3",
"react-container-query": "0.11.0",
"react-content-loader": "4.3.4",
"react-cropper": "1.3.0",
"react-dnd": "10.0.2",
"react-dnd-html5-backend": "10.0.2",
"react-document-title": "2.0.3",
"react-dom": "16.12.0",
"react-fittext": "1.0.0",
"react-loadable": "5.5.0",
"react-particles-js": "2.7.0",
"react-pdf": "4.1.0",
"react-resizable": "1.10.1",
"react-rnd": "10.1.3",
"react-router-dom": "5.1.2",
"react-sortable-hoc": "1.10.1",
"reqwest": "2.0.5",
"reset-css": "5.0.1",
"resize-observer-polyfill": "1.5.1",
"sass": "1.24.0",
"sass-loader": "8.0.0",
"save-svg-as-png": "1.4.14",
"semver": "7.1.1",
"speed-measure-webpack-plugin": "1.3.1",
"style-loader": "1.1.1",
"styled-components": "4.4.1",
"svg-sprite-loader": "4.1.6",
"terser-webpack-plugin": "2.3.1",
"urijs": "1.19.2",
"url-loader": "3.0.0",
"url-polyfill": "1.1.7",
"webpack": "4.41.4",
"webpack-bundle-analyzer": "3.6.0",
"webpack-dev-server": "3.10.1",
"webpack-manifest-plugin": "2.2.0",
"webpack-merge": "4.2.2",
"wowjs": "1.1.3"