安装
npm i wsf-library
npm package位置 https://www.npmjs.com/package/wsf-library
环境说明
开发环境(dev)：
npm run dev
说明文档环境(guide)：
npm run guide
编译环境与npm发布：
npm run build
npm run publish
组件开发过程
如开发一个Form分类下的Input组件:
- 开启development环境(可选)
- Form分类下生成Input目录(此目录下必须有index.js、使用css模块化)
- 把组件暴露到components/index.js
- 可以发布了，npm run publish发布(确保你有登录/有权限/有验证邮箱)
- 在组件文件夹下写 *.story.js,readme.md确保guide环境有效
文件目录
ROOT
│ .gitmodules //git子模块配置文件(暂时废弃)
│ README.md //仓库说明
│
├─.storybook //storybook guide环境配置
│ addons.js
│ Aspira-Light.woff
│ config.js
│ postcss.config.js //webpack postcss配置
│ story.css
│ webpack.config.js //storybook使用的create-react-app webpack配置
│
├─components
│ │ app.js //development环境入口
│ │ index.js //build编译环境（rollup）入口,组件建成后发布前在此export
│ │ story.js //guide环境说明文档入口
│ │
│ ├─Form //Form:development和guide环境的列表分类项（必需）
│ │ ├─Select //组件名(此目录必须包含index.js、readme.md、*.story.js才能符合三套环境)
│ │ │ │ index.js //组件入口(必需，保持在组件名的文件夹下)
│ │ │ │ index.less //组件的样式文件
│ │ │ │ readme.md //guide环境下 单组件的说明文档(必需)
│ │ │ │ Switch.story.js //各组件说明文档入口
│ │ │ │
│ │ │ └─assets //各组件的资源文件，如css、图片、readme.md都可以放在这里
│ │ │ canuse.png
│ │ │
│ │ └─Switch //Form分类下的另一个组件
│ │ │ index.js
│ │ │ index.less
│ │ │ readme.md
│ │ │ Switch.story.js
│ │ │
│ │ └─assets
│ │ canuse.png
│ │
│ └─General //General分类
│ └─Iiu
│ │ Iiu.story.js
│ │ index.js
│ │ index.less
│ │ readme.md
│ │
│ └─assets
│ canuse.png
├─config //development的webpack配置
├─dist //编译的输出位置
│ │ index.cjs.js //require('')的方式引入时引入的文件
│ │ index.es.js //import from ''的方式引入时引入的文件
│ │ package.json //处理后的package.json
│ │ README.md //处理后的readme
│ │
│ ├─Iiu
│ │ index.css //在下面这种方式引入时，需手动引入css
│ │ index.js //import Iiu from "wsf-library/Iiu"的方式引入时引入的文件
│ ├─Select
│ │ ...
│
├─node_modules
│
└─tools //node工具
build.js //rollup编译进程与配置
clean.js //删除dist下除.git的文件
技术选择与依赖
- node ——fs文件操作
- storybook ——代码量少，组件参数说明、实时调整与展示，回调可观测，带各组件的参数说明与说明文档
- rollup ——通用的 第三方库的打包方案
- React ——
- Webpack ^3.4.1 —— 可自行更新版本，但请保持在4之下，storybook与4不兼容
- postcss —— css模块化等