# functionStencil

**Repository Path**: dream_land/function-stencil

## Basic Information

- **Project Name**: functionStencil
- **Description**: npm包函数库模板
一个函数库应该具备：

npm版本管理
支持按需引入
提供多种模块导出方式 ES modules 和 CommonJS
通过单元测试
vuepress文档 然后我们需要ts语法，加上了
支持ts语法 为了团队维护方便，加上了
自动化构建模板 添加、删除
构建工具选择rollup
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-26
- **Last Updated**: 2023-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 问题

在我们开发公司项目或者开发自己多个项目的时候会出现如下情况：

1. 在开发  <strong style="color:#ff0000;">项目A</strong> 的时候会封装很多公共的方法，并放在  <strong style="color:#ffc000;">公共方法文件tools.js</strong>  中
2. 现在需要开发一个新的  <strong style="color:#c00000;">项目B  </strong>，我们一般会直接把  <strong style="color:#ff0000;">项目A </strong> 中的  <strong style="color:#ffc000;">公共方法文件tools.js</strong>  直接直接拷贝到  <strong style="color:#c00000;">项目B</strong>  中
   + 在  <strong style="color:#c00000;">项目B</strong> 中不会用到tools中的所有方法，无形之后增加了很多无用的代码
   + 在   <strong style="color:#c00000;">项目B</strong> 中需要使用方法的时候，需要先去看代码、分析代码是否合适，会浪费一些时间
   + 发现某个方法存在一定的bug或者不完善，只是修改了当前项目的方法，之前项目里面的还是存在问题

3. 在<strong style="color:#ff0000;">项目A</strong>和<strong style="color:#c00000;">项目B</strong>中分别新增了一些不同的方法，再次开发新<strong style="color:#0070c0;">项目C</strong>，那么同样需要将 <strong style="color:#ffc000;">公共方法文件tools.js</strong>拷贝一份，那么应该拷贝那个项目的？

以上问题在一个公司多团队多项目中经常遇到，那么怎么处理的？



## 函数库介绍

我们将用到的所有方法都封装到一个`npm`包里面，然后在项目里面安装封装的`npm`包就解决了上面产生的问题。当前项目就是一个 <strong style="color:#7030a0;">函数`npm`库模板</strong>

具体功能如下：

- `npm`版本管理
- 支持按需引入
- 提供多种模块导出方式 `ES modules `和 `CommonJS`
- 通过`jest`单元测试
- `vuepress`文档，快速查找方法及使用
- 支持`ts`语法 为了团队维护方便，加上了
- 自动化构建模板 添加、删除
- 构建工具选择`rollup`

## 开发项目

### 准备

克隆项目

```bash
git clone https://gitee.com/dream_land/function-stencil.git
```

进入项目根路径，安装依赖

```bash
npm i
```

进入文件夹`vuepress`安装依赖

```bash
npm i 
```

### 添加

添加一个方法：

```bash
npm run add array.contrast
```

![1691646147847.png](http://updatafiles.banmag.cn/1691646147847.png)

通过以上命令会自动生成模块文件夹和函数方法，在`src`文件夹下面找到`src/array/contrast/index.ts`文件，在这个文件里面编写对应的方法

如果需要单元测试，运行

```bash
npm run add array.size jest
```

![1691646178128.png](http://updatafiles.banmag.cn/1691646178128.png)

这样就会自动添加`单元测试`文件，单元测试在`test`文件夹中，根据自己添加的函数进行编写测试代码

### 使用说明

在`vuepress/src/docs/`文件夹里面创建对应的文件 `array.md`，在这个文件里面编写函数的使用方法

需要在`vuepress/src/.vuepress/config.js`配置导航

运行命令可以看到`vuepress`页面效果

```bash
npm  run doc:dev
```



### 删除

需要删除某个方法的时候，直接直接命令即可

```bash
npm  run del 模块名.方法名
```

需要注意：删除方法之后，需要在`vuepress`中删除对应的函数说明



### 发布

发布`npm`库

先登录自己的`npm`账号，然后执行命令即可

```bash
npm run npmbag
```

发布说明文档

需要将`vuepress`打包进行部署



## 命令

- `add`：添加函数，默认不添加单元测试，

  ```bash
  npm run add 模块名.函数名
  ```

  - 会在`src`下面创建模块文件夹，然后在创建对应的函数
  - 如果需要单元测试，就在后面随意添加字符就可以，单元测试会在`test`文件夹下面创建文件夹及文件
  - 会自动将函数添加到入口文件`src/index.ts`

- `del`：删除函数，如果有单元测试，也会删除单元测试的文件

- `createdDoc`:根据`vuepress`中的文件生成文档说明，可以用于私库

- `createdNpmDoc`：根据`vuepress`中的文件生成文档说明，用户`npm`

- `build`：`npm`包打包

- `test`：测试项目

- `npmbag`：自动化打包上传

- `all`：创建文档说明和自动化打包上传

- `doc:dev`：启动`vuepress`项目

- `doc:build`：打包`vuepress`项目