Caibeike-basic NPM

彩贝壳公共模块

说在前面

1. 各自模块不要有互相引用的情况各个模块如果有互相依赖的东西的话，建议使用npm包的形式，一方面保证开发和产出的代码是一致的，避免双方修改导致不必要的冲突, 比如 cbk-tools包引用了cbk-utils里面的方法，请import {xxx} from 'cbk-utils' 不要使用相对路径，打cbk-tools包的时候不会把cbk-utils里面的东西打进去
1. 组件的.less文件必须放在style文件夹下面，会统一打包，目前脚本没有处理style以外的less文件
1. 引用包的命名方式 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就是你的模块名
1. type是模块的类型，目前只支持component(ui组件类型)/function(函数或者对象类型)
1. miscName这个参数将会显示在git-pages最顶层的菜单中
1. author 作者, 这个字段将会写入你打的npm包中
1. feature 你这个模块下的第一个功能/或者组件名称，这个地方必须英文或者数字,比如组件命名为aaa那么将来使用的时候会是Aaa
在已有的npm包下添加组件 cbk add module
这个命令会在已经有的模块下面新增一个功能/组件, 这个命令会校验是否在cbk-[module]/下查看是否有[feature]这个目录如果有的话，会去site config 下创建相关的描述文件如果没有的话会提示新建一个新的功能/组件 新建功能/组件参数说明
- 1. name 这个是模块的中文描述, 会展示在大模块下方左侧的导航栏中，所以尽量精确用中文表达意思
- 1. groupName 分组的名称，会有两个选项，新建或者在旧的分组下新建，都可以支持
cbk remove 删除npm包或者删除npm包下面的某个模块
cbk remove module
这个命令会移除所有大模块下的文件，并且撤销大模块被被引用的文件执行 cbk remove [module] 可能需要重新执行 npm run start
cbk remove module
这个命令会移除大模块下的某个feature 功能/组件, 并且取消在引用文件中的引用，但是无法移动在其他feature 功能/组件中的引用, 所以在执行之前请检查
发布Npm包
npm run build:npm
- 1. 选择你要发布的包
- 1. 发布日志
- 1. 发布人
- 1. 选择你要发布的版本类型
  - beta(0.0.1-beta.1,自动转beta版本) 发布测试环境一定要合并到pre分支
  - pro(0.0.x,自动加一) 发布生产环境一定要合并到master分支
  - not (不升级版本，有可能上次升级完版本后发布失败或者脚本报错，下次没必要再升级版本，如果当前版本已经发布过，选择not的话 npm publish 会自动发布失败，有开发人员控制) 如果发布生产环境会走下面的流程
- 1. 是否是前端优化
- 1. 需求名称/优化名称
- 1. 需求文档/前端优化文档
cbk 命令的目的
1. 这个项目本身结构比较复杂, 真正如果新建一个feature 可以参照下方的流程, 而且有一些内在的联系(潜规则) 可能在执行的时候不是一下就能找准，很有可能配置了1个小时都不见得能调通, 熟手的话估计也得15-20分钟，但是其实完全没有必要
1. 重心转移，其实很多东西完全没有必要去了解, 只要关系一下几点就好了
- 我的代码写在哪 cbk-xxx/feature/index.js
- 我的markdown写在哪里 site/docs/zh-CN/cbk-xxx/xxx.md
- 我的模块介绍写在哪里 site/docs/zh-CN/quick-start/quick-start-xxx.md
1. 通过统一化的输入和输出，方便使用，也有利于规范文件类型，而保证以后用脚本输出更多的功能。

如果上述都配置好了，接下来是打包配置和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这个路径是可以找到的，不可以随意起名