# dolphin
**Repository Path**: jianganglu/dolphin
## Basic Information
- **Project Name**: dolphin
- **Description**: 每刻项目脚手架工具，用于封装公共的webpack配置信息，服务多个项目在配置上的一致性。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-09-27
- **Last Updated**: 2023-09-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 🐬dolphin 小海疼
> 每刻费控团队，前端项目的脚手架命令工具,运行dolphin需要node version 12+
### 开发指南
#### 本地联调
使用npm link在未发布的情况下，本地进行开发和测试。
* 将本项目`@maycur/dolphin链接到`全局的`node_modules`下：
``` bash
#step1 进入项目根目录
cd dolphin
#step2 链接到全局
npm link
```
* 在目标项目中使用
``` bash
#step1 进入目标项目根目录
cd target
#注意: 这里的链接 link 指的是在 dolphin 初始化时对应的 package.json 中的 name, 如果不一致可能是不生效
npm link @maycur/dolphin
```
* 可以通过``` npm config get prefix ```命令查看全局链接的地址
* 取消
``` bash
npm unlink @maycur/dolphin
```
### Get Start
``` bash
#step1 install
npm install @maycur/dolphin --save-dev
#step2 创建配置目录
npx dolphin --create build #build是文件夹的名称，名字可以自定义
#step3 启动本地开发模式
npx dolphin -d
```
> 可以吧dolphin的命令移到package.json中script下定义,通过npm run xxx的方式执行
### 命令参数
#### -p
webpack的mode=production，不传默认为development
#### -d
本地开发模式，启动webpack-dev-server
#### -c
circular, 查看项目中循环依赖的情况
#### -a
Analyzer, 使用Webpack Bundle Analyzer来分析bundle的组成
#### -u
useless, 分析在项目中无用的文件
#### --env xxx
接受一个值，表示服务器环境（注意和webpack的mode区分开），目前费控的服务器在研发阶段只要分为dev, sit, uat, prod四个标准阶段的流程环境，默认是dev环境
#### --struct xxx
构建配置文件的标识，根据定义的值来决定引用的对应的构建配置文件, 默认为dt.struct.js（构建配置和webpack的config文件不一样，注意区分）
#### --cmdbat xxx
多个命令参数执行规则，定义了改参数后，命令行执行时，会到build/cmdbat中找对应xxx.cmdbat.js,
该参数主要用于解决需要多个参数参与的命令或者需要固化的执行命令参数集合
#### -wpconfig
定义扩展的webpack配置文件（和wepback原始config有差异），默认为default.wpconfig.js
### .dolphinrc.js
配置文件
#### .dolphinrc.js相关参数
##### 参数build
项目对应的构建目录，dolphin会根据build配置的目录地址去找相对应的配置文件。
eg:
```js
{
build: 'project' //项目根目录下的project目录为项目的构建目录
}
```
#### build目录结构
##### build/struct
执行构建的配置文件，执行构建是指在工程中一种构建方式，在每刻的业务场景下，每一种执行构建对应一种架构类型，比如钉钉版对应一种执行构建，独立版对应一种执行构建，通常独立部署的项目也会对应一种执行构建。
struct配置说明，请参考项目中struct.md文件
应用场景:
钉钉版和独立版构建的信息不一致，在业务上就已经区分为两个版本，还有独立部署的项目，都会有一些个性化的配置信息。
eg:
```js
//dt.struct.js
module.exports = {
appType: 'dt',
code: 'maycur',
cdnUrl: {
urlTemplate: 'https://dt-[env]-cdn.maycur.com/h5/',
dev: 'https://dt-dev.maycur.com/h5/',
},
apiRoot: {
urlTemplate: 'https://dt-[env].maycur.com/api/',
prod: 'https://dt.maycur.com/api/',
},
};
```
##### build/cmdbat
dolphin命令的参数文件，因为dolphin带的参数太多，则命令行就相对复杂，所以可以通过cmdbat入参，引入一个命令配置文件。
##### build/wpconfig
dolphin构建的webpack配置文件，包含了可扩展的webpack配置内容，和一些额外配置信息，具体参考config配置说明。
##### build/static
静态文件夹，该文件夹的所有文件都会被复制到项目构建后的dist目录下的static目录中
##### build/html
存放html格式文件，该文件夹的所有文件都会被复制到项目构建后的dist目录下
##### build/template
存放ejs模板文件
#### HtmlWebpackPlugin到ejs模板
项目中采用该插件默认的模板格式（ejs）
注意：HtmlWebpackPlugin支持的ejs模板，并非ejs模板引擎所支持的ejs，而是通过lodash的template功能实现的类ejs模板
所以ejs中重要的include模板嵌套的能力默认是不能支持的
但是dolphin通过通过代入函数参数的方式，自定义了一个includeTemp（命名用于区分ejs的include）方法，来实现模板嵌套的场景
``` html
...
<%= includeTemp('temp/main.ejs',{name:'hello'})%>
...
```
#### 内置的ejs模板变量如下：
|变量|描述|备注|
|:---|:---|:---|
|mode|webpack的打包模式|值为development和production之一 |
|struct|构建标识，根据项目中的构建配置文件来确定| |
|env|环境变量|值为dev,sit,uat,prod |
|appType|每刻报销的版本，值为dt和ng之一| |
|includeTemp | 模板嵌套函数 | 用于引用模板 |
#### systemConfig说明
根据打包过程将可能用到的系统配置通过```systemConfig```提供给项目使用。
```systemConfig```可获取的数据有：
* appType(struct配置中的应用版本类型，目前费用产品主要分为钉钉版（dt）和独立版（ng）两种版本格式)
* code（struct配置中的各个混合云部署的构建编码，可用于区分独立部署的场景）
* cdnUrl（cdn资源的url）
* apiRoot（struct配置中后台接口域名）
* mode（打包模式同webpack中的mode）
* local（true为本地开发模式）
* webRoot（h5端报表跳转的地址）
* env（表示服务器环境，目前费控的服务器在研发阶段只要分为dev, sit, uat, prod）
* login_independent（独立版登陆接口）
* version（同appType表示应用版本类型，主要为了兼容项目代码有'ng'对应'maycur' 、'dt'对应'dd'）