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

发布时间:2024-08-20 20:55:16 浏览:388次

一、在线编译运行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/components'
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/components'
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() // 调用实际模块上的方法
})


演示示例:


演练页面:http://www.daelui.com/#/tigerlair/saas/practice/lpewglffnc7e

预览页面:http://www.daelui.com/#/tigerlair/saas/preview/lpewglffnc7e

微信公众号
武汉前端开发蓝风

关注作者获取更多干货

交流QQ群
武汉前端开发蓝风

前端问题讨论区