IDEOnline-浏览器编译

说到前端编译，一般都会想到Webpack的各种Plugin及Loader，多数时候我们都只知道这个库能帮我们把代码编译成什么样，按部就班，却并不清楚具体做了什么。今天换个思路，聊一聊浏览器环境下如何做前端编译，脱离开舒适的Node工具体系，我们能对编译的过程有更深的体会。

长期编写中

`Node` 环境与浏览器环境下代码编译的开发对比

Node
开发流程:仓库创建->创建代码文件->编写代码->工程构建->静态文件部署
优点：完备成熟的开发体验
缺点：文件管理无法信息化，跨仓库跨团队困难
浏览器
开发流程:组件管理界面->创建组件编辑页->创建组件文件->勾选所需依赖->线上调试->线上打包提交
优点：组件线上统一管理，赋予组件更多的属性，不需要经过代码提交部署流，没有仓库权限隔离的开发体验程
缺点：开发资源少，性能上线未知，开发体验不完善。

什么时候需要在前端环境下去做编译呢？

我们习惯了在本地仓库编写代码，打包编译后上传服务器，一切都刚刚好。不过在一定情况下这种方式其实也限制了我们的生产力，我们无法从原始的代码文件获取代码文件管理相关的信息，无法将多个项目环境下的优秀组件进行提炼分享。

设计

通过对现有的在线IDE的调研，发现大型的IDE产品更多的是使用后台编译返回构建结果，部分实验类型的IDE虽然实现了编写代码生成页面的效果，但是功能单一拓展较弱。如果要针对面临的一个需求进行整体的架构进行设计还得保证拓展性，自己本身的能力确实不够。
实力不够Copy来凑，IDEOnline = webpack + npm
整理了一下对在线编辑器(IDEOnline)的需求：

1、拓展性
2、性能
3、特色
4、符合开发者习惯
5、组件配置化
6 、二次开发，代码生成器
关键点：
1、当前编辑组件的依赖列表，类似Npm 的package.json，描述组件运行需要的其他库
2、异步依赖资源的加载，在本地开发环境下，依赖资源都是同步的，而在浏览器环境下，当前编辑的组件所需要的未知依赖则需要通过远程加载。
3、文件类型
4、文件的编译，文件内部依赖的处理
5、vue 文件的处理
6、sass 样式隔离
7、JS沙箱

组件设计

    > name: 名称
    > version: 版本号
    > fileType: 文件类型，非文件后缀，如需转换请使用sdk.tools
    > fileContext: 源文件字符串
    > runnable: 可执行代码
    > resourceType: 资源类型，
      1、package/入口文件
      2、internal/内依赖 
      3、external/外依赖
      4、temporary/临时依赖
    > dependencies: 依赖列表 包含所依赖的所有文件
    > >> src: 资源地址
    > >> windowScodeName: 挂载在window 上的变量名 resourceType为external生效

编译器

不同的文件都有对应的编译器，可以根据需求进行各种拓展

编译工具

根据现有的开发环境，对组件文本的编译主要是考虑对HTML、JS、Sass、Vue等文件类型处理，针对不同的文件格式需求，添加对应的编译器。

#### HTML
- Posthtml
#### JavaScript
- babel
  - 可以做哪些事
    - 无痕埋点：目前主流的前端埋点方式还是手工打点。这样做的效率不高，而且每次添加新的埋点还需要发版和等待数据收集。我们正在尝试通过 Babel 插件注入打点代码，并在筛选数据时通过给函数名做标记的方式，随时获取过去一段时间内的埋点信息。

    - 错误日志收集：目前市面上的前端错误日志收集主要还是依赖于捕获错误的堆栈信息。生产环境上的代码都经过了混淆，这给识别工作带来了很大的麻烦。我们正在尝试在 catch 语句中直接注入源代码的信息，尽可能收集更加准确和详细的错误信息。
    -  中英文切换

如果您想用babel-code-frame和一个消息抛出一个错误：
export default function({ types: t }) {
  return {
    visitor: {
      StringLiteral(path) {
        throw path.buildCodeFrameError("Error message here");
      }
    }
  };


#### Css
- Sassjs
- Postcss
#### Vue
- [vue-template-compiler](https://zhuanlan.zhihu.com/p/114239056)
  - compiler.parseComponent(file, [options])
- [vuese](https://vuese.org/zh/#vuese-cli) vue 组件自动生成文档
#### 代码检查
[jshint](https://github.com/jshint/jshint)
#### 测试工具
mocha
#### 兼容性检查
[Modernizr](https://github.com/Modernizr/Modernizr)

编译产出

根据不同文件的类型，经过编译后的产出也不一样，vuese产出的是md组件文档，Scss生成的则是带有Scoped功能的样式并直接插入到文档流。而vue的组件文件则是生成一个可执行的 Vue组件对象能够在页面中直接使用

Vue组件产出的使用方式：可以通过:is的功能直接使用
wapper功能：针对在线编辑的组件产出的JS对象提供加强功能，类似mixin

`IDEOnline`面临的问题已经解决方案

性能问题
1、在方案设计时考虑到代码编辑的构建环境由node迁移至浏览器，除了是否可以实现，性能优化也是在此过程中要不断做的，在线代码编辑器的性能瓶颈无法预知，于是在开发设计的时候将在线编辑器不断向实际开发场景进行比对，保证最坏情况下的迁移无问题。
2、在线编译的资源加载的小量与大量的多方案
3、编辑的源代码以及可运行的编译代码(压缩处理)
4、编译性能及时预览，编译瓶颈及时发现
5、组件文档生成与代码耦合，加强使用者的粘度
6、组件在线测试用例

金点子

1、通过ATS语法树针对性的添加debugger 断点定位
2、代码生成器，已有的框架关键词规则通过规则解析生成代码
let myCode = 'Rico-Code-console' -> ATS 语法匹配关键字Rico-, 根据规则表解析 Code -> let myCode = function Code () {console.log('Code')}