更新记录
0.1.1(2020-11-30)
修复无法对输入目录二级目录进行操作的问题
0.1.0(2020-11-30)
0.1.0
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
2.9.0 |
HBuilderX插件通用注意事项
HBuilderX-2.7.12以下版本安装插件市场内的插件后,卸载时需手动卸载,详细教程参考:如何手动卸载插件
ChangeVuetoESModule
作用
将指定目录中的 .vue
单文件组件中的 <template>
、 <script>
标签里面的代码提取出来,组成一个新的 ESModule
标准的 .js
文件,供支持 ESModule
运行时调用
兼容性
目前测试并通过的运行时环境:
- Chrome@laster
- Electron@laster
理论上支持所有的ESModule 环境
使用
只要检测项目根目录中有 .electronWithVue
文件插件便会启动,在检测到项目中有文件变动时便会对文件进行如下操作
-
.vue
将输入目录中的.vue
单文件组件中的<template>
、<script>
标签里面的代码提取出来,组成一个新的ESModule
标准的.js
文件,并写入到输出目录 -
.js
将输入目录中的.js
写入到输出目录
默认输出目录:/js/
默认输入目录:/vue/
,可通过HbuilderX
配置来修改。
注意
没有内置babel,不支持任何语法转义,只能使用定版的ES6语法进行代码书写
插件只会处理.vue 文件中 <template>
、<script>
两个标签中的代码
重要的事情说三遍 重要的事情说三遍 重要的事情说三遍
参考项目关键代码说明
详细代码请跳转 此项目 查看
main.js
electron 主进程入口文件index.html
electron 渲染进程入口文件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FETools</title>
<!-- 引入样式文件-->
<link rel="stylesheet" href="./lib/element.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 定义Vue应用挂载点-->
<div id="app">
<App/>
</div>
<!-- 引入打包好的三方库-->
<script src="./lib/vue.js"></script>
<script src="./lib/element.js"></script>
<script src="./lib/dexie.js"></script>
<!-- 通过ESModule 的方式引入 Vue 应用入口文件-->
<script type="module" src="./js/index.js"></script>
</body>
</html>
初衷
当我们在使用 Vue 框架开发Electron 视图层的时候,大部分都是使用 Electron-Vue
,或者Vue-cli
中的插件来进行的。
现在我们有了一种新的轻量级的方案来用 Vue 开发Electron 视图层,对了就是我们目前的这个插件 ChangeVueToESmodule
既然然你已经在进行Electron 开发了,那么你肯定知道 Electron 一般使用的都是发版时最新的BLink 内核,而最新的BLink内核是直接支持 ESModule 的。所以我就想到了有没有一种简单的方式,将 .vue 单文件转化成ESModule来使用?有,通过对.vue 文件的代码进行正则匹配,可以将 <template>
标签中的代码,转化成字符串,放到组件对象的 template
属性中,然后 Electron 视图入口文件中,加载全量的 vue.minjs
文件,即可直接使用了。无须 webpack 的介入,直接体验编写 .vue 使用 ESModule的一站式服务
历程
刚开始进入FETools开发的时候,是直接使用Nodejs进行处理的。每次开发之前都需要启动一个 dev.js ( 访问地址 ) 代码来监听文件变动。然而这个文件变动并不文档,有时可能存在代码丢失的情况。再次想起了许久未曾用的HbuilderX,于是决定通过插件的方式来实现,以期稳定的代码转义输出