获取前端项目

网盘密码【handhand】。

获取hippius提供的工程/打好的包

种子工程/种子工程打好的dist包

如果是部署dist包（不管是下载来的，还是用种子工程自己打包的，或者其他途径），记得需要做参数替换操作

替换对应的参数：

 BASE_PATH: 'BUILD_BASE_PATH',
 PLATFORM_VERSION: 'BUILD_PLATFORM_VERSION',
 WEBSOCKET_HOST: 'BUILD_WEBSOCKET_HOST',
 BPM_HOST: 'BUILD_BPM_HOST',
 CLIENT_ID: 'BUILD_CLIENT_ID',
 API_HOST: 'BUILD_API_HOST',

执行命令替换(例如)：

find dist -name '*.js' | xargs sed -i "s BUILD_API_HOST http://xxxx.saas.hand-china.com g"
find dist -name '*.js' | xargs sed -i "s BUILD_CLIENT_ID hippius-front-dev g"
find dist -name '*.js' | xargs sed -i "s BUILD_BPM_HOST http://xxxxxxxx:8330 g"
find dist -name '*.js' | xargs sed -i "s BUILD_WEBSOCKET_HOST ws://xxxxxxxxx:8260 g"

如果您使用的是海马汇提供的「种子工程」，之后您可以【跳过这一页】文档了，直接开始环境搭建即可开始开发使用。

如果您使用的是海马汇提供的「种子工程打好的dist包」，那么替换参数之后就可以直接部署了，编译后的代码没法再做开发了。

项目部署：可以参考hzero文档，从「部署项目」的第二点开始看，项目打包参看项目的readme。

已经有工程，只想获取hippius的模块

如果您使用的不是种子工程而是其他的基于hzero(1.0.0或以上，0.9和0.10只能使用种子工程)开发的工程(不推荐)，那么您需要额外做一点操作，请把步骤「全部操作完」再安装依赖和运行项目

1. 需要下载这么一个ckeditor压缩包，解压在public/lib下，即public/lib/ckeditor。

2. 由于海马汇的图文内容使用了秀米，秀米仅支持Ueditor编辑器，Ueditor已经荒芜多年，仅剩源码版本，您需要下载这么一个ueditor压缩包解压到您项目的public文件夹下，这个压缩包里的内容为Ueditor的源码。那么此时public目录下，应该是有public/src/components/hipsUeditor这么一个文件夹。

随后打开src/index.js，加入两行代码，以在项目启动时(异步地)加载Ueditor。

// 轮播图闪屏/企业频道自定义消息素材库的秀米富文本
import * as loadEditor from 'hippius-front/lib/components/hipsEditor/loadEditor';

// other codes

// 加载的秀米富文本
loadEditor.load();

1. 在您的项目的package.json里的依赖(大白话就是，在那堆hzero-front-xxx的后面)，加上如下依赖，删除node_modules后重新yarn（记得忽略puppeteer），但请保留yarn.lock。关于 Hippius 的版本选择, 需要与当前项目中的 Hzero 版本对应，对应关系详见本章最后。

"hippius-front": "^0.7.0",
"hippius-front-analyse": "^0.7.0",
"hippius-front-app": "^0.7.0",
"hippius-front-contact": "^0.7.0",
"hippius-front-msggroup": "^0.7.0",
"hippius-front-subapp": "^0.7.0"
"hippius-front-qnr": "^0.7.0"

1. 在您项目的src/utils/getModuleRouters.js文件下，引入以下路由。

   import * as hippiusFrontAnalyse from 'hippius-front-analyse/lib/utils/router';
   import * as hippiusFrontApp from 'hippius-front-app/lib/utils/router';
   import * as hippiusFrontContact from 'hippius-front-contact/lib/utils/router';
   import * as hippiusFrontMsggroup from 'hippius-front-msggroup/lib/utils/router';
   import * as hippiusFrontSubapp from 'hippius-front-subapp/lib/utils/router';
   import * as hippiusFrontQnr from 'hippius-front-qnr/lib/utils/router';
   

   并且在文件末尾的数组里，这这些路由加上

   export default app =>
   getModuleRouters(app, [
   hippiusFrontAnalyse,
   hippiusFrontApp,
   hippiusFrontContact,
   hippiusFrontMsggroup,
   hippiusFrontSubapp,
   hippiusFrontQnr,
   // other hzero ruotes
   // other your routes
   ]);
   

2. 修改一下webpack配置config/webpack.config.js，避免hippius包中的样式类被污染

// hzero1.1.0开始的webpack，只需要改一处
// TODO: 需要修改占位符 第二个 hzero-front
const projectReg = '(hzero-front|hzero-front)(-([\\w-]*))?';

// 改为：
const projectReg = '(hzero-front|hippius-front)(-([\\w-]*))?';



// hzero1.1.0之前的webpack，如下修改
// 替换 hzero-front.. 等正则，将其替换为 (hippius|hzero)-front..
// 例如： 
const hzeroFrontChildNodeModulePathReg = new RegExp(
    `hzero-front\\S*\\${path.sep}node_modules`);
// 替换为：
const hzeroFrontChildNodeModulePathReg = new RegExp(
    `(hippius|hzero)-front\\S*\\${path.sep}node_modules`);

// 具体替换次数视不同版本的 Hzero wepback配置文件内容而定。
// 以下替换内容作为参考：

// hzero-front 子项目里的node_modules路径
const hzeroFrontChildNodeModulePathReg = new RegExp(
`(hippius|hzero)-front\\S*\\${path.sep}node_modules`); 

// hzero-front 子项目代码路径
const hzeroFrontBuildLibPathReg = new RegExp(
  `(hippius|hzero)-front\\S*\\${path.sep}lib`);

// 大约123行附近的这个正则，把hippius加上，搜索【css-loader】所在的对象里的getLocalIdent这个函数里
  const match = context.resourcePath.match(
    new RegExp(`(src|(hippius|hzero)-front\\S*\\${path.sep}lib)(.*)`));

常见错误

依赖版本不匹配：

yarn的时候某个包报无法匹配的错误(did not match和dosen’t match)。因为同版本发了多次包，删除yarn.lock中对应的包的信息，重新yarn即可

图例：图中错误都是hzero-front-himp-1.0.0.tgz，报错都是无法匹配(did not match和dosen’t match)

mac：

window：

postcss-svgo报错：(2019-10-30)

svgo@1.3.1有问题，dependencies和resolutions里加svgo的依赖，指定1.3.0版本或1.3.2，可以过一段时间再改回来(指的是svgo指定版本的依赖)

Hippius 与 Hzero 版本对应