Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mip-cli 升级计划 #34

Open
xuexb opened this issue Nov 21, 2017 · 0 comments
Open

mip-cli 升级计划 #34

xuexb opened this issue Nov 21, 2017 · 0 comments
Assignees

Comments

@xuexb
Copy link
Contributor

xuexb commented Nov 21, 2017

目前的 MIP-CLI 已经覆盖了调试 MIP 页面、调试 MIP 组件 、创建 MIP 页面、创建 MIP 组件、验证等功能,结合使用体验预期做一些优化,如:

目标

  1. 提示中文化、友好化(方便初级用户明确错误在哪里,如何获取帮助),如 mip init 后添加提示,让使用者明确数据配置中的含义。
  2. 组件目录自动查找,不依赖 mip.config
  3. 可调试线上 MIP 页面(需要配合 Chrome 浏览器扩展插件)。
  4. 统一验证命令入口,且使用体验更好,如:
    • mip validate ./filename.html
    • mip validate ../*.html
    • mip validate http://demo.com/index.html
    • mip validateelement ./mip-demo
  5. 文档优化,同博客的使用帮助做拆分。

目前的验证

  • mip validate - MIP-CLI 提供的验证页面
  • mip-validator < a.html - mip-validator 提供的验证页面

目前的调试

当执行 mip server 命令时会:

  1. 检查是否有 mip.config 来决定是否是调试 MIP 页面。
  2. 如果不存在 mip.config 且当前目前的文件夹是 /^mip-*$/ 则认为是调试组件。
  3. mip.configextensionsDir 字段存在时会替换 MP 页中的组件地址。
  4. mip.configmipDir 字段存在时会替换 MIP 页中的 mip.js, mip.css 地址。

这样的话 1 和 2 就有个差异,需要很明确的知道这一点才能很好的调试组件,比如你在想调试组件时(想使用组件的 README.md 调试组件)存在了 mip.config 文件,那么就调试不了,必须删除才行。

并且由于有 mip init 初始化命令存在,可能很多人都会先 mip initmip server ,这也导致了一些疑惑。

计划

mip server 目录自动查找

在启动 mip server 后,以当前启动目录为基础目录,用户可以打开链接会显示当前目录下的文件和文件夹,用户可以逐级的打开需要的文件,用户可以主动的打开以 ^mip-(.+)$ 命名的文件夹中的 README.md 用来预览,如:

.
├── ext
│   └── mip-demo
│       ├── README.md
│       ├── mip-demo.js
│       ├── mip-demo.less
│       └── package.json
├── index.html
└── mip.config

可以在当前目录执行 mip server 然后打开 127.0.0.1:port ,逐级打开组件目录,如:127.0.0.1:port/ext/mip-demo/README.md

也可以直接在 ext 目录中执行 mip server ,那么链接就是 127.0.0.1:port/mip-demo

甚至可以直接在 ext/mip-demo 中打开,不干预打开的任何目录,只自动识别匹配的 ^mip-*/README.md$ 文件,在列表中 README.md 后面提示点击可调试,那么用户的调试链接就是:

  • 127.0.0.1:port/ext/mip-demo/README.md -> 打开组件文档源文件
  • 127.0.0.1:port/mip-demo/README.md?preview - 预览组件调试,该文件内会注入 mip-demo.js?preview 的引用
  • 127.0.0.1 -> 打开预览 index.html 文件

提示如图:

image

其实就类似 GitHub 中的 预览和 raw 的功能。

配置明确化

mip.config 的配置中:

  • mipDir - 核心代码路径
  • extensionsDir - 扩展组件路径

将根据这两项配置去替换页面中的链接,如果不配置,只能预览组件调试和普通的页面,不替换线上地址链接。

可调试线上 MIP 页面

因为本地是使用 NodeJS 把本地的 HTML 页面中对应的 mip.js, mip.css 和 MIP 组件地址替换成了本地地址,而站长们很多情况是没有真实项目的本地环境,那么只能靠 MIP 组件不断的上线调试。

计划开发个 Chrome 的 MIP 插件,支持和本地的 mip server 实时交互,也就是说你可以一键把你网站线上的地址直接映射到本地的代码,方便线上调试和线上定位问题。

开启浏览器代理调试需要配置 mipDirextensionsDir 并启动 mip server 服务。

image

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant