BOS3D、BOS2D工具栏开发者指北

写在前面

务必使用大小写敏感的文件系统。如果是ntfs,建议调整一下系统设置。

Feature:

  • 支持 eslint ,预置一些规则
  • 配置了 babel7
  • 支持 HotModule
  • 使用2空格缩进
  • git commit 使用 AngularJS commit conventions
  • 使用 husky 保证提交都必须通过 eslintcommit 检查
  • 支持 less + css module
  • 支持一键生成 Changelog
  • 支持对 bundle 进行分析
  • 支持打包时间统计

使用方法

如果是 windows 用户,尽量用git shell运行下面的 script,否则可能遇到问题

全局依赖

node >= 12
npm >= 5
git shell(仅build:debug命令需要用到)

部署本项目

先获取Viewer工程和UI工程的代码,然后使用自己的web host,使得访问http://localhost:8899/Viewer/src可以指向Viewer工程的/src。如果你用webstorm,此ide自带了这个功能,但是需要把权限验证关掉。如果用其他ide,则需要找对应插件或使用nginx。

预览本项目

  npm i
  npm start

提交代码

  git add $yourfile
  npm run cz

检查语法风格

# 这个命令可以修复一些基本的风格错误,没有必要自己一个个修复
npm run lint:fix

生成changelog

npm run changelog

使用husky

husky已经预先设置了常用的hook。原理:安装husky后,它在.git目录下生成一些hook script,当满足条件(比如pre-commit),它会查找.huskyrc内是否包含对应的script,如果有就执行。本脚手架的强制eslint和 commit message检查就是这样实现的。因此,想自定义hook,可以自己在 .huskyrc内添加script就可以了。

针对局部依赖的一点说明

  • 升级依赖可以用 ncu 命令。一定要注意检查不兼容改动。
  • jest >= 26 会导致运行test的时候出现奇怪的问题,因此将它锁定为固定版本。如果需要升级,一定要测试。babel-jest 和 eslint-plugin-jest 的版本也要和它适配。
  • webpack >= 5 已经发稳定版了,以后也可以考虑升级。目前的配置已经做了部分适配,升级时自行测试(尤其注意测试 prod-debug)。happypack 在 webpack5 上已经gg了,可以直接弃用(或者改为 thread)

自定义开发

准备工作与注意事项

  1. 先确保你的npm版本不低于5(起码要能读取package-lock.json),请不要用yarn。觉得npm慢的可以直接换淘宝源(不建议使用cnpm,我司已经发生过多次cnpm依赖关系处理错误的情况)

  2. 先clone本项目,并将上文的准备工作做好,然后 新建并切换到自己的分支进行开发 ,最后提交代码并发起MR。

  3. 本项目强制eslintcommit message 规则检查,不能通过则无法提交代码。可以通过 npm run lint:fix 修复一些简单的问题。不熟悉 commit message 的写法,可以用 npm run cz 替代 git commit -m

  4. 为了减小一些体积,尽可能不要使用外部UI库(除非它特别小,或者可以把很多无用的代码 tree shake 掉。目前本项目已经配置了 material-ui,通常来说足够了)。

项目结构

  • /jest: 单元测试配置。
  • /public: 发布目录。dev server 会将此目录视为 / 。
  • /report: 空目录,用来在 prod-debug 模式下输出一些报告。
  • /src/UI: BOS3DUI源码
  • /src/BOS2DUI: BOS2DUI源码
  • /src/Libs: 自定义公有库的源码
  • /src/Linkage: 二三维联动源码
  • /webpack: webpack配置

其余的都是单独的配置且很显然知道里面是什么,不再赘述。

上述目录内部的具体说明可以在它们内部的README.md找到。

Q & A

  • Q: 启动或者打包的时候控制台报错:Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED A: OS系统,在环境变量中添加:export NODE_OPTIONS=--openssl-legacy-provider