1.1.5 • Published 1 year ago

print-editor v1.1.5

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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 包
1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.0.0

4 years ago