探囊取物之前端在线编译运行Vue与JS

一、在线编译运行Vue文件步骤：

1、全局引入编译器

<script src="http://www.daelui.com/pool/prod/packages/babel/6.26.0/dist/babel.min.js" defer="defer"></script>

2、解析Vue文件

import coder from '@daelui/dogjs/dist/libs/coder'
coder.vue.parseTemplate(vuecode) // vuecode为实际vue代码

3、编译注册为Vue组件，并插入style样式

// resolve方法已包含解析功能，$dog.Vue为内置的Vue(可使用当前环境的Vue自行定义)，$pig为umd文件加载器(基于System.js)
import $pig from '@daelui/pigjs'
coder.vue.resolve(vuecode, $dog.Vue, $pig).then(cp => {
  this.component = cp
})

演示示例：

二、在线编译运行JS步骤

1、全局引入编译器

<script src="http://www.daelui.com/pool/prod/packages/babel/6.26.0/dist/babel.min.js" defer="defer"></script>

2、解析为UMD格式的编码

import coder from '@daelui/dogjs/dist/libs/coder'
coder.transformModuleUMD(jscode) // jscode为实际ES6、ES5代码

3、解析为UMD格式并获取模块

// resolve方法已包含解析功能，$pig为umd文件加载器(基于System.js)
import $pig from '@daelui/pigjs'
coder.resolve(jscode, $pig).then(res => {
 let mod = res.default
 // mod.run() // 调用实际模块上的方法
})

演示示例：

低配置云服务器，首次加载速度较慢，请耐心等候

 预览页面：前端技术记录web前端技术开发,总结日常经验,分享技术成果,优化开发方式,改善开发体验,提升开发效率http://www.daelui.com/#/tigerlair/sass/preview/lpewglffnc7e

演练页面：前端技术记录web前端技术开发,总结日常经验,分享技术成果,优化开发方式,改善开发体验,提升开发效率http://www.daelui.com/#/tigerlair/sass/practice/lpewglffnc7e

扫码关注微信