# caibeike-basic > basic ablitiy for caibeke Latest version **0.0.2** (published 2022-02-22) · MIT license · 0 weekly downloads ## Install ```sh npm install caibeike-basic pnpm add caibeike-basic yarn add caibeike-basic bun add caibeike-basic ``` Provides the command `cbk`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.2 | | Published | 2022-02-22 | | First published | 2022-02-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 46 | | Unpacked size | 10.8 MB | | Known vulnerabilities | 0 (+53 in 3 direct dependencies) | | Install scripts | no | | Author | YUEYIN | | Maintainers | soul-mt | | Keywords | TOOL, React | ## Links - npm: https://www.npmjs.com/package/caibeike-basic - Repository: git@git.caibeike.net:static/caibeike-gorge-static - npm.io page: https://npm.io/package/caibeike-basic ## Dependencies (46) - [qs](https://npm.io/package/qs.md) ^6.7.0 - [md5](https://npm.io/package/md5.md) ^2.2.1 - [raf](https://npm.io/package/raf.md) ^3.4.1 - [tar](https://npm.io/package/tar.md) ^4.4.10 - [antd](https://npm.io/package/antd.md) ^3.25.3 - [rxjs](https://npm.io/package/rxjs.md) ^6.6.3 - [axios](https://npm.io/package/axios.md) ^0.19.0 - [chalk](https://npm.io/package/chalk.md) ^2.4.2 - [react](https://npm.io/package/react.md) ^16.13.1 - [cbklog](https://npm.io/package/cbklog.md) ^2.0.5 - [events](https://npm.io/package/events.md) ^3.2.0 - [jquery](https://npm.io/package/jquery.md) ^3.4.1 - [qrcode](https://npm.io/package/qrcode.md) ^1.3.3 - [express](https://npm.io/package/express.md) ^4.17.1 - [fstream](https://npm.io/package/fstream.md) ^1.0.12 - [cbkfe-ui](https://npm.io/package/cbkfe-ui.md) 1.5.63 - [bootstrap](https://npm.io/package/bootstrap.md) ^4.3.1 - [popper.js](https://npm.io/package/popper.js.md) ^1.14.7 - [react-dom](https://npm.io/package/react-dom.md) ^16.13.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [nodemailer](https://npm.io/package/nodemailer.md) ^6.4.11 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 - [antd-mobile](https://npm.io/package/antd-mobile.md) ^2.3.1 - [cbkfe-utils](https://npm.io/package/cbkfe-utils.md) 1.2.9 - [sead-mobile](https://npm.io/package/sead-mobile.md) ^0.0.2-beta.9 - [art-template](https://npm.io/package/art-template.md) ^4.13.2 - [cbkfe-assets](https://npm.io/package/cbkfe-assets.md) ^1.0.7 - [cbkfe-bridge](https://npm.io/package/cbkfe-bridge.md) ^1.1.20 - [cbkfe-logger](https://npm.io/package/cbkfe-logger.md) ^1.0.1 - [cbkfe-request](https://npm.io/package/cbkfe-request.md) ^1.0.21 - [cookie-parser](https://npm.io/package/cookie-parser.md) ^1.4.4 - [element-react](https://npm.io/package/element-react.md) ^1.4.34 - [cbkfe-template](https://npm.io/package/cbkfe-template.md) ^1.5.128 - [async-validator](https://npm.io/package/async-validator.md) ^1.10.1 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2 - [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^2.1.0 - [react-weixin-title](https://npm.io/package/react-weixin-title.md) ^1.0.2 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^5.1.1 - [react-click-outside](https://npm.io/package/react-click-outside.md) ^3.0.1 - [element-theme-default](https://npm.io/package/element-theme-default.md) ^1.4.13 - [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.7.0 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.5.3 - [nodemailer-smtp-transport](https://npm.io/package/nodemailer-smtp-transport.md) ^2.7.4 - [webpack-filter-warnings-plugin](https://npm.io/package/webpack-filter-warnings-plugin.md) ^1.2.1 - [babel-plugin-regx-dynamic-import](https://npm.io/package/babel-plugin-regx-dynamic-import.md) ^0.0.13-beta.2 - [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^5.0.3 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.2 (latest) — 2022-02-22 ## README ### 彩贝壳公共模块 #### 说在前面 - 1. **各自模块不要有互相引用的情况**各个模块如果有互相依赖的东西的话，建议使用npm包的形式，一方面保证开发和产出的代码是一致的，避免双方修改导致不必要的冲突, 比如 `cbk-tools`包引用了`cbk-utils`里面的方法，请`import {xxx} from 'cbk-utils'` 不要使用相对路径，打`cbk-tools`包的时候不会把`cbk-utils`里面的东西打进去 - 2. **组件的.less文件必须放在style文件夹下面，会统一打包，目前脚本没有处理style以外的less文件** - 3. 引用包的命名方式 `cbkfe-xxx`; ### cbk 命令使用 **安装全局命令**: cnpm i cbk-script -g https://c.caibeike.net/pages/viewpage.action?pageId=96469230 这里有更详细的说明 **cbk init**: 初始化一个新的npm包，和cbk-ui/cbk-tools并列不用输入`cbk-`直接定义名称即可 `cbk init` 会像 `npm init` 一样有一些初始化的参数需要填写 ***参数说明*** - 1. `name`就是你的模块名 - 2. `type`是模块的类型，目前只支持component(ui组件类型)/function(函数或者对象类型) - 3. `miscName`这个参数将会显示在`git-pages`最顶层的菜单中 - 4. `author` 作者, 这个字段将会写入你打的npm包中 - 5. `feature` 你这个模块下的第一个功能/或者组件名称，**这个地方必须英文或者数字,比如组件命名为aaa那么将来使用的时候会是Aaa** 在已有的npm包下添加组件 **cbk add [module] [feature]** 这个命令会在已经有的模块下面新增一个`功能/组件`, 这个命令会校验是否在`cbk-[module]/`下查看是否有`[feature]`这个目录 如果有的话，会去`site config` 下创建相关的描述文件 如果没有的话会提示新建一个新的`功能/组件` ***新建功能/组件 参数说明*** - 1. `name` 这个是模块的中文描述, 会展示在大模块下方左侧的导航栏中，所以尽量精确用中文表达意思 - 2. `groupName` 分组的名称，会有两个选项， 新建或者在旧的分组下新建，都可以支持 **cbk remove 删除npm包或者删除npm包下面的某个模块** ***cbk remove [module]*** 这个命令会移除所有大模块下的文件，并且撤销大模块被被引用的文件 执行 `cbk remove [module]` 可能需要重新执行 `npm run start` ***cbk remove [module] [feature]*** 这个命令会移除大模块下的某个`feature 功能/组件`, 并且取消在引用文件中的引用，但是无法移动在其他`feature 功能/组件`中的引用, 所以在执行之前请检查 **发布Npm包** ***npm run build:npm *** - 1. 选择你要发布的包 - 2. 发布日志 - 3. 发布人 - 4. 选择你要发布的版本类型 - `beta(0.0.1-beta.1,自动转beta版本) 发布测试环境一定要合并到pre分支` - `pro(0.0.x,自动加一) 发布生产环境一定要合并到master分支` - `not (不升级版本，有可能上次升级完版本后发布失败或者脚本报错，下次没必要再升级版本， 如果当前版本已经发布过，选择not的话 npm publish 会自动发布失败，有开发人员控制)` 如果发布生产环境会走下面的流程 - 5. 是否是前端优化 - 6. 需求名称/优化名称 - 7. 需求文档/前端优化文档 **cbk 命令的目的** - 1. 这个项目本身结构比较复杂, 真正如果新建一个`feature` 可以参照下方的流程, 而且有一些内在的联系`(潜规则)` 可能在执行的时候不是一下就能找准，很有可能配置了1个小时都不见得能调通, 熟手的话 估计也得15-20分钟，但是其实完全没有必要 - 2. 重心转移，其实很多东西完全没有必要去了解, 只要关系一下几点就好了 - 我的代码写在哪 `cbk-xxx/feature/index.js` - 我的markdown写在哪里 `site/docs/zh-CN/cbk-xxx/xxx.md` - 我的模块介绍写在哪里 `site/docs/zh-CN/quick-start/quick-start-xxx.md` - 3. 通过统一化的输入和输出，方便使用，也有利于规范文件类型，而保证以后用脚本输出更多的功能。 ##### 如果上述都配置好了，接下来是打包配置和npm文件的配置，和常用脚本的说明 **打npm包** `npm run build:npm [module] eg: npm run build:npm tools `; 或者 `npm run build:npm` 会有选择项出来，让你选择要打的包。 **注意** 目前打包只会增加小版本号，如果要升级大版本和中版本号，需要手动升级。 **打git-pages包** `npm run postpublish` 会自动打包然后发布到git-pages上, 目前只有提交MR到master分支后方能打包 **本地调试** `npm run start` 访问 eg: http://localhost:3000/#/zh-CN/cbk-tools/html2image 下面是对cbk-script脚本所做事情进行描述，如果不是为了熟悉整个项目，可以不看。 #### 如何新增一个模块 - 首先你要想好你的模块名 比如 工具类是`tools`/ui组件库是`ui`/公共方法是`utils`/ 最终输出npm包的时候会统一添加彩贝壳前缀`cbk-` - 在创建文件夹的时候要使用 `cbk-xxx` 这种命名方式 - 你需要在`./src`, `./site/pages`, `./site/pages`, `./site/docs/zh-CN`, `./npm` 下面创建新的文件夹 `cbk-xxx` - 你还需要在 `./site/pages/quick-start` 下面创建你的的`markdown`引入文件`(命名为: xxx.jsx)`以及`./site/docs/zh-CN/quick-start`下面创建你的`markdown`文件`(命名为: quick-start-xxx.md)`, `quick-start`文件被强制要求添加 ##### 如果你文件创建好之后现在需要做一些跟项目**耦合**的事情 - 你需要在`./src/index` 文件中引入你的文件夹, 然后你需要在`./src/cbk-xxx`下创建模块专属的`index.js`文件用来独立打包发布 - 然后你需要在 `./config/index`的`modules`下添加你的一些全局配置 - `name`: 是你想好的模块名`xxx` - `type`: 是模块类型 - `pagesKey`: 是你在pages/index中的key值, 定义好之后需要在 `./site/pages/index.jsx`中添加你的`key`值，并且填入你的模块下的group分类和group下面的具体模块 可以参照UI或者tools的配置 - `miscKey`: 是在拿导航栏的描述的时候用的key值, 导航栏的描述文案同一在 `./site/locales/zh-CN.js`中获取，里面会根据不通过的类型分类, 文件中`misc` 配置是左侧导航栏中的一级菜单和顶层导航菜单的文案 `page`配置是三级菜单的名称，二级菜单没有 - `miscKey`: 目前左侧导航二级菜单不需要类似的配置， 在`./site/pages/index.jsx`中配置二级属性即可 - `miscName`: 目前已经把一级菜单的配置抽离出来，不再需要去具体的文件里面进行配置 - 在 `./npm/cbk-xxx`文件夹下添加 `dist/`文件夹和`package.json`文件并且添加初始化版本号和相关信息, 还要添加`README.md`文件用来进行文档说明和版本迭代更新文档说明 ##### 基本配置完之后，现在添加第一个markdown描述 - 进入`./site/pages/index.jsx` 找到你定义的`pagesKey`，然后配置 比如 ``` { components: { ugc: { html2image: require('../../') } }, [your pagesKey]: { [your groupName]: { [your test module]: require('../../') } } } ``` - 如果你没有在`./pages/cbk-xxx`下有可以用来写markdown的文件那么可以新建一个 `./pages/cbk-xxx/test.js` - 在`test.js`中你会引入一个**.md**文件 这个文件需要创建一个,比如: `./site/docs/zh-CN/ckb-xxx/mmm.md` - 创建好了之后你还需要在`./site/locales/zh-CN.js/`这个文件配置里面的page下面配置你的key和value, `key`是你在`./site/pages/index.jsx`中之前配好的三级菜单，现在需要配置你的描述用来在菜单中展示 - **切记** 你在左侧菜单命名的key值一定要在`./src/cbk-xxx/`文件夹下面要能找到对应的文件，因为在page.jsx中会根据这个key去捞取对应的文件，获取其抛出的对象，否则你的函数将无法被正常注册， 比如在上方代码中三级菜单 `html2image`这个配置在`./src/cbk-tools/html2image`这个路径是可以找到的，不可以随意起名 --- _Source: https://npm.io/package/caibeike-basic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._