1.1.5 • Published 1 year ago
print-editor v1.1.5
Print-editor
原 print-x 的 NPM 版本,引入了打包工具和 ES6 模块化特性,使逻辑之间和文件之间尽量解耦,从而:
- 提高当前开发效率
- 降低上手成本
- 降低后期维护成本
- 能够快速封装为 npm 包,集成到前端框架 Vue 或 React 中使用
环境版本
node -v12.6.0
npm -v6.14.5
基础命令
npm install //安装依赖
npm run build:dev //启动本地服务
npm run build:prod //打包静态资源(./dist)
目录结构
print-editor
├── config //**页面用到的所有数据
│ ├── mockRsp //服务端返回数据(模拟)
│ └── renderSet //UI相关数据(字符串,属性名,ID等)
├── libs //** 所有最终被打包的js模块文件
│ ├── domHandlers //自定义构造函数和封装的dom操作
│ ├── plugins //以jquery为依赖的库
│ ├── utilities //自定义工具函数
│ └── index.js
├── public //**静态文件
│ ├── assets //静态的字体、图标和css文件
│ └── templates //html模板文件
├── package.json
├── server.js
├── start.js //入口文件(只在启用Node服务时需要)
├── webpack.common.js
└── webpack.prod.js
开发人员只需在以下目录进行代码提交:./libs/
(js 逻辑)、./public/assets/css/
(css 样式)、./public/templates/
(html 模版)目录内。
关于编码
规范
- 以airbnb 规范为基础,搭配 esLint+Prettier 进行语法验证和格式化
- 语法验证和格式化的配置文件分别为
./.eslintrc.json
、./.prettierrc
建议
- ES6 语法优先
- 模块化优先,能单独拆出来的代码尽量进行拆分
- DOM 操作和工具方法分离,放在不同的模块文件
编辑器
推荐 VsCode 编辑器(搭配format on save设置)
ToDo
- webpack 配置优化
- 对照原 print-x,修复存在的功能 bug
- 使用 sass 预处理并重构 css 文件
./libs/
下各模块代码的优化- 样式优化
- 封装 Vue 组件并发布 npm 包