gulp打包vue3+jsx+less插件

news2024/11/18 11:30:30

最终转换结果如下
在这里插入图片描述

在根目录下添加gulpfile.js文件,package.json添加命令npm run gulp

var gulp = require('gulp')
var babel = require('gulp-babel')
var less = require('gulp-less')
var del = require('del');
var spawn = require('child_process').spawn;

const outDir = "dist/"


function es6toes5() {
  return gulp.src('packages/**/*.js')
    .pipe(babel({
      presets: ["@babel/preset-env"],
      'plugins': [() => {
        return {
          visitor: {
            ImportDeclaration(path, source) {
              console.log(path);
              if (path.node.source.value.endsWith('.less')) {
                path.node.source.value = path.node.source.value.replace(/\.less$/, '.css')
              }
            },
          },
        }
      }]
    }))
    .pipe(gulp.dest(outDir ));
}

// function jsxtojs1() {
//   return gulp.src("packages/**/*.jsx").
//     pipe(babel({
//       plugins: [
//         ['@babel/plugin-transform-react-jsx', {
//           "throwIfNamespace": false,
//         }
//         ]
//       ]
//     })).
//     pipe(gulp.dest(outDir ));
// }
function jsxtojs() {
  return gulp.src("packages/**/*.jsx").
    pipe(babel({
      plugins: [
        [
          '@vue/babel-plugin-jsx',
          {
            enableObjectSlots: false,
          },
        ],
      ],
    })).
    pipe(gulp.dest(outDir ));
}

function lesstocss() {
  return gulp
    .src('packages/**/*.less')
    .pipe(
      less({
        relativeUrls: true,
      })
    )
    .pipe(gulp.dest(outDir ))
}

function npmTask(cb) {
  spawn('npm.cmd', ['run', 'lib'], {}) // 'npm.cmd' : 'npm' 运行 npm run lib 
    .on('error', cb)
    .on('close', code => code ? cb(new Error(code)) : cb());
}



exports.default = gulp.series(
  () => del([`./${outDir}/**`]),
  npmTask,
  jsxtojs,
  es6toes5,
  lesstocss);

打包后的结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1117482.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

亚马逊测评,买家号支付不了、砍单率高是什么问题,需要怎么解决

下半年旺季很多卖家都在使用自养号测评给产品冲一波权重,但是很多朋友会遇到下不了单或者砍单率过高等问题。有人以为是支付卡的问题,也有人觉得是IP被关联了。其实他们讲的也没错,但是,亚马逊风控不会针对某个点去进行检测&#…

中小型企网搭建

企业网项目建设实践 目录 企业网项目建设实践 一、 项目背景 二、 需求分析 三、 项目拓扑规划 四、 规划表 1. vlan规划 2. 设备管理规划 3. 端口互联规划 4. IP规划 5. SSH服务规划 五、 仿真拓扑 六、 项目实践(配置过程) 七…

复杂的菱形继承及菱形虚拟继承(详解)

复杂的菱形继承及菱形虚拟继承 复杂的菱形继承及菱形虚拟继承虚拟继承解决数据冗余和二义性的原理笔试面试题 复杂的菱形继承及菱形虚拟继承 单继承:一个子类只有一个直接父类时称这个继承关系为单继承 多继承:一个子类有两个或以上直接父类时称这个继…

计算机算法分析与设计(15)---贪心算法(虚拟汽车加油问题和最优分解问题)

文章目录 一、虚拟汽车加油问题1.1 问题描述1.2 思路分析1.3 代码编写 二、最优分解问题2.1 问题描述2.2 思路分析2.3 代码编写 一、虚拟汽车加油问题 1.1 问题描述 一辆虚拟汽车加满油后可行驶 n n n km。旅途中有若干加油站。设计一个有效算法,指出应在哪些加油…

【STL】bitset位图的介绍和使用

⭐博客主页:️CS semi主页 ⭐欢迎关注:点赞收藏留言 ⭐系列专栏:C进阶 ⭐代码仓库:C进阶 家人们更新不易,你们的点赞和关注对我而言十分重要,友友们麻烦多多点赞+关注,你们的支持是我…

优思学院|精益管理涵盖哪些内容?

精益生产管理涵盖哪些内容?精益生产是一种以客户需求为引导、以消除浪费和持续改进为核心的生产管理模式,有效提升了公司的效率和利润,投入却极少。它包含哪些具体要素呢? 准时化生产(JIT) JIT&#xff0…

idea调教-全键盘操作

先转个vim,现在代码编辑可以使用全部键盘 接下来键盘使用目录 现在需要在项目文件中进行跳转,idea在左边目录等进行切换使用alt1等可以切换左右目录等,用方向建可以选中对应的文件,使用shiftenter可以在右边打开新的标签页,使用a…

日常--windows11右键切换回win10

文章目录 一.前言二.方法1.一键切换2.恢复回Win11右键菜单: 一.前言 从win10更新成win11后,很多地方不适应,这里演示如何将windows11右键切换回win10 二.方法 1.一键切换 winr打开运行 输入…

C++ 友元函数和友元类

前言 在本文中,您将学习在C 中创建友元函数和友元类,并在程序中有效地使用它们。OOP的重要概念之一是数据隐藏,即非成员函数无法访问对象的私有或受保护的数据。但是,有时这种限制可能迫使程序员编写冗长而复杂的代码。因此&#…

反向传播back propagation

深度学习概述 决定要怎么连接这些neuron的时候 就已经确定了function set 相比于之前做logistic regression,linear regression的时候,换一个方式来决定function set 比较大,包含了logistic regression,linear regression没法包含…

【C++入门 一 】学习C++背景、开启C++奇妙之旅

目录 1.什么是C2. C的发展史3. C的重要性3.1 语言的使用广泛度3.2 在工作领域1. 操作系统以及大型系统软件开发2. 服务器端开发3. 游戏开发4. 嵌入式和物联网领域5. 数字图像处理6. 人工智能7. 分布式应用 3.3 在校招领域3.3.1 岗位需求3.3.2 笔试题 4. 如何学习C4.1 别人怎么学…

工业电子中的深力科分享一款PWM控制器 KA3525A

关于PWM控制器: PWM控制器是一种用于控制电机或其他设备的电路,它通过改变脉冲宽度调制(PWM)信号的占空比来控制设备的输出。PWM控制器可以使用单片机或开发板等设备来实现,通过设定占空比,可以轻松地控制…

LeetCode —— dfs和bfs

797. 所有可能的路径 给你一个有 n 个节点的 有向无环图(DAG),请你找出所有从节点 0 到节点 n-1 的路径并输出(不要求按特定顺序)。 graph[i] 是一个从节点 i 可以访问的所有节点的列表(即从节点 i 到节点…

【斗罗二】天梦哥告白冰帝,唐三再返场,雨浩通过冰帝考验,觉醒新武魂

Hello,小伙伴们,我是小郑继续为大家深度解析斗罗大陆2绝世唐门国漫资讯。 斗罗大陆动画第二部绝世唐门第19集已经更新了,全都是霍雨浩与天梦哥在极北之地,吸引冰帝加入造神计划的过程。不仅有天梦哥的爱情宣言告白,唐三也再次限时…

设计模式_备忘录模式

备忘录模式 介绍 设计模式定义案例问题堆积在哪里解决办法备忘录模式行为型模式, 保存了数据某一个时间点的状态 在需要的时候进行回档单机游戏的角色 数据保存并且回档保存和回档加一个状态管理类 类图 代码 MomentData using UnityEngine;public class MomentD…

SLAM从入门到精通(从仿真到实践)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 之前花了40多篇文章,弄清了什么是slam,怎么学习slam,什么是ros,怎么利用ros来学好slam等等。不仅如…

云安全(1)--初识容器逃逸之特权容器逃逸

文章目录 前言privileged,特权容器逃逸环境配置实际利用实际环境利用计划任务/var/spool/cron/crontabs/ 适用于ubuntu debain/var/spool/cron 适用于centos ld.so.preloadssh 前言 在10.15号的上海中华武数杯的渗透赛里做到了一个k8s的题目,这应该是我第一次在比赛…

13.3测试用例进阶

一.测试对象划分 1.界面测试(参考软件规格说明书和UI视觉稿) a.什么是界面 1)WEB站(浏览器) 2)app 3)小程序 4)公众号 b.测试内容 1)界面内容显示的一致性,完整性,准确性,友好性.比如界面内容对屏幕大小的自适应,换行,内容是否全部清晰展示. 2)验证整个界面布局和排版…

【数据结构】线性表(七)堆栈:链式栈及其基本操作(初始化、判空、入栈、出栈、存取栈顶元素、清空栈);顺序栈与链式栈之比较

文章目录 一、堆栈1. 定义2. 基本操作 二、顺序栈三、链式栈0. 链表1. 头文件和常量2. 栈结构体3. 栈的初始化4. 判断栈是否为空5. 入栈6. 出栈7. 存取栈顶元素8. 清空栈9. 主函数10. 代码整合 四、 顺序栈与链式栈的比较 堆栈(Stack)和队列(…

Linux MMC子系统 - 1.eMMC简介

By: Ailson Jack Date: 2023.10.21 个人博客:http://www.only2fire.com/ 本文在我博客的地址是:http://www.only2fire.com/archives/160.html,排版更好,便于学习,也可以去我博客逛逛,兴许有你想要的内容呢。…