当前位置： 首页 > news >正文

rollup环境配置

news 2026/3/26 22:03:37

VUE2.x源码学习笔记

1. rollup环境配置

  1. 首先在VScode中新建文件夹vue_sc，然后终端打开定位到打开的文件夹，输入“npm init -y”初始化配置项，运行成功之后文件夹新增package.json文件

  2. 继续在终端运行"npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve -D"

  3. 在vue_sc文件夹下新建文件夹src，然后在src文件夹下新建index.js入口文件

    function Vue(){}
export default Vue;

  4. 配置rollup：在vue_sc下新建文件rollup.config.js和.babelrc

    import babel from "rollup-plugin-babel"
import serve from "rollup-plugin-serve"export default {input: "./src/index.js", // 打包的入口文件output: { // 打包的出口文件file: "dist/vue.js",format: "umd", // iife（立即执行函数）、esm（ES6 模块）、cjs（Node 规范）、umd（支持 amd + cjs）name: "Vue", // 使用 umd 打包需要指定导出的模块名，Vue 模块将会绑定到 window 上；sourcemap: true, // 开启 sourcemap 源码映射，打包时会生成 .map 文件；作用：浏览器调试ES5代码时，可定位到ES6源代码所在行},plugins: [babel({ // 把高级语法转为初级语法exclude: "node_modules/**", //排除不需要转化的}),serve({ port: 3000, // 端口3000contentBase: "", // 空字符表示当前目录为基准openPage: "/index.html", // 文件打开位置})]
}

    // babel的预解析
{"presets": ["@babel/preset-env"]
}

  5. 在vue_sc文件夹下新建文件index.html

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">hello</div>
</body>
</html>

  6. 先修改package.json中scripts，改为以下图片，然后在终端输入"npm run dev"进行打包
    在这里插入图片描述

    dev脚本解释：

    • rollup 命令：默认会去找 node_module/bin/rollup；
    • -c：config 选项，使用配置文件，默认找 rollup.config.js；
    • -w：watch 选项，监听文件变化；当文件发生变化时重新打包；

    注意：如果报错遇到以下错误"Error: Cannot find module ‘node:process’"，我解决的方式是降低rollup的版本，我安装的是2.56.0版本
    在这里插入图片描述

  7. 打包成功之后在vue_sc中自动添加dist文件夹，终端成功界面如下：
    在这里插入图片描述

  8. 创建 html 引入 Vue
    在根目录下创建index.html文件，引入dist/vue.js，打印Vue

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 引入 vue.js，将会绑定到 window--><script src="dist/vue.js"></script><script>console.log(Vue) </script>
</body>
</html>

相关文章：

rollup环境配置

VUE2.x源码学习笔记 1. rollup环境配置 首先在VScode中新建文件夹vue_sc&#xff0c;然后终端打开定位到打开的文件夹&#xff0c;输入“npm init -y”初始化配置项&#xff0c;运行成功之后文件夹新增package.json文件 继续在终端运行"npm install babel/preset-env ba…...

编程日记 2023/2/28 11:44:22

二分查找与二分答案、递推与递归、双指针、并查集和单调队列

二分查找与二分答案 文章目录二分查找与二分答案应用总结例题木材加工题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1提示数据规模与约定思路代码递归与递推应用总结[NOIP2003 普及组] 栈题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1提示思…...

编程日记 2023/2/28 11:43:12

如何进行域名购买，获取免费ssl证书，使用springboot绑定ssl证书

前言 小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识&#xff0c;有兴趣的小伙伴可以关注一下&#xff01;也许一个人独行&#xff0c;可以走的很快&#xff0c;但是一群人结伴而行&#xff0c;才能走的更远&#xff01;让我们在成长的道路上互相学习&#…...

编程日记 2023/2/28 11:42:02

LabVIEW网络服务安全2

LabVIEW网络服务安全2在客户端应用程序中创建签名对请求进行签名要求您具有能够从客户端的编程语言调用的MD5摘要算法以及SHA256加密摘要算法的实现。这两种算法通常都可用于大多数平台。还需要&#xff1a;1. 要使用的HTTP方法的字符串&#xff08;“GET”、“POST”、“PUT”…...

编程日记 2023/2/28 11:40:55

java动态代理

目录儿一、代理模式的作用二、实现代理的方式三、动态代理的实现3.1 jdk动态代理3.2 cglib动态代理一、代理模式的作用 功能增强: 基于某个功能&#xff0c;再增加一些功能。 &#xff08;比如目标类只负责核心功能&#xff0c;其他附属功能通过代理类完成。代理类的方法名与目…...

编程日记 2023/2/28 11:39:46

Python 简单可变、复杂可变、简单不可变、复杂不可变类型的copy、deepcopy的行为

copy模块&#xff1a;copy&#xff1a;浅拷贝deepcopy&#xff1a;深拷贝简单可变类型、复杂可变的copy()、deepcopy()&#xff1a;简单不可变、复杂不可变类型的copy()、deepcopy()&#xff1a;结论&#xff1a;对于简单类型的可变类型copy是深拷贝&#xff0c;改变了该拷贝变…...

编程日记 2023/2/28 11:38:40

QML Item

在QML中所有的可视项目都继承自Item&#xff0c;虽然Item本身没有可视化的外观&#xff0c;但它定义了可视化项目的所有属性。 Item可以作为容器使用&#xff1a; Item{Rectangle{id:retc}Rectangle{id:retc1}Rectangle{id:retc2}Rectangle{id:retc3}} item拥有children属性…...

编程日记 2023/2/28 11:37:31

使用xca工具生成自签证书

本文使用 xca 生成自签证书。 概述 之前使用 openssl 生成证书&#xff0c;在 golang 中测试&#xff0c;发现客户端连接失败&#xff0c;经查发现是Subject Alternative Name不支持导致的。因虚拟机 openssl 版本较低&#xff0c;有个功能无法实现&#xff0c;且升级麻烦&…...

编程日记 2023/2/28 11:36:21

Unity IOS 通过命令行导出IPA

新建一个文件然后输入如下内容 #!/usr/bin/env sh /Applications/Unity/Hub/Editor/2020.1.5f1c1/Unity.app/Contents/MacOS/Unity -quit -batchmode -projectPath /Users/zyt/Test -executeMethod Test.BuildEditor.BuildApp cd /Users/zyt/Test/Xcode/unity-xcode xcodebuil…...

编程日记 2023/2/28 11:35:13

「架构」全链路异步模式

总结自尼恩的全链路异步&#xff1a;网关纯异步化网关层的特点&#xff1a;不需要访问业务数据库只做协议转换和流量转发特点是 IO 密集型&#xff0c;特别适合纯异步的架构&#xff0c;可以极大的节省资源。如何进行网关异步化&#xff1f;使用高性能的通信框架Netty&#xff…...

编程日记 2023/2/28 11:34:07

CleanMyMac4.20最新版新增功能及电脑清理垃圾使用教程

CleanMyMac4.20作为知名的Mac清理工具&#xff0c;仅需一键即可快速而安全地清理系统垃圾&#xff0c;释放磁盘空间&#xff0c;因此一直深受Mac用户的喜爱。在不断更新的版本中&#xff0c;CleanMyMac已经不仅仅满足于只做简单的Mac清理工具&#xff0c;而是为Mac用户提供更多…...

编程日记 2023/2/28 11:33:00

Vue2的tsx开发入门完全指南

本篇文章尽量不遗漏重要环节&#xff0c;本着真正分享的心态&#xff0c;不做标题党 下面进入正题&#xff1a; 由于现在vue的官方脚手架已经非常完善我们就不单独配置webpack了&#xff0c;节省大量的时间成本。 首先使用vue/cli创建一个vue模版项目&#xff08;记得是vue/…...

编程日记 2023/2/28 11:31:53

GLSL shader学习系列1-Hello World

这是GLSL shader系列第一篇文章&#xff0c;本文学习目标&#xff1a; 安装编辑工具编写hello world程序 安装插件 我使用VSCode编写shader代码&#xff0c;在VSCode上有两个好用的插件需要先装一下&#xff1a; Shader languages support for VS Code glsl-canvas&#xf…...

编程日记 2023/2/28 11:30:44

Codeforces Round #851 (Div. 2)（A~D）

A. One and Two给出一个数组&#xff0c;该数组仅由1和2组成&#xff0c;问是否有最小的k使得k位置的前缀积和后缀积相等。思路&#xff1a;计算2个数的前缀和即可&#xff0c;遍历判断。AC Code&#xff1a;#include <bits/stdc.h>typedef long long ll; const int N 1…...

编程日记 2023/2/28 11:29:35

内存保护_1：Tricore芯片MPU模块介绍

上一篇 | 返回主目录 | 下一篇 内存保护_1&#xff1a;Tricore芯片MPU模块介绍1 何为MPU2 MPU相关的硬件子系统2.1 基于地址范围保护逻辑说明2.1.1 地址范围寄存器2.1.2 读、写、执行权限寄存器2.1.3 保护集设置位2.1.4 内存保护功能使能位2.1.5 核的内存保护范围获取说明2.1.6…...

编程日记 2023/2/28 11:28:27

Vue3 -- PDF展示、添加签名（带笔锋）、导出

文章目录笔锋签名方案一实现要点实现过程组件引用页面元素添加引用实现代码效果展示缺点方案二修改页面元素替换引用修改代码效果展示完整代码地址实现功能的时候采用了两个方案&#xff0c;主要是第一个方案最后的实现效果并不太理想&#xff0c;但实现起来比较简单&#xff0…...

编程日记 2023/2/28 11:27:17

行测-判断推理-图形推理-样式规律-属性规律-曲直性

左边的图全是由曲线构成的选C1 3 5全是由曲线构成的2 4 6全是由直线构成的第三行的图形有曲有直选A1 3 5有曲有直2 4 6全是直线选D图形有曲有直&#xff0c;排除B D外曲内直->内曲外直->外曲内直->内曲外直->外曲内直->内曲外直所以问号出的图形应该是内曲外直选…...

编程日记 2023/2/28 11:26:11

idea集成Alibaba Cloud Toolkit插件

idea集成Alibaba Cloud Toolkit插件 ​ 使用该插件主要是简化打包、上传、启动服务的相关操作。 ​ 很早之前的方式是使用开发工具&#xff08;eclipse,idea&#xff09;&#xff0c;使用maven命令完成项目打包&#xff08;这里指jar&#xff09;&#xff0c;然后通过shell工…...

编程日记 2023/2/28 11:25:02

Win11 文件夹打开慢或卡顿解决方案

问题 目前是 2023/2/27, 我的 Win11 系统点开一个文件夹要等待 2-3 秒才能加载出来, 使用体验极差。网上查阅大量资料, 有些人在系统更新后这个情况就消失了, 但是我这一直存在, 系统也是当前的最新版, 没有修复。 目前得出的结论是, 因为 Win11 的工具栏占用了过多的资源, 需…...

编程日记 2023/2/28 11:23:56

【PostgreSQL的idle in transaction连接状态】

在平时查询pg_stat_activity这个视图的时候&#xff0c;每一行包含了一个进程的相关信息&#xff0c;包含当前正在执行的SQL&#xff0c;或者会话的状态等等&#xff0c;state字段表示当前进程的状态。在PostgreSQL数据库里&#xff0c;其实代码里总共定义了7种BackendState&am…...

编程日记 2023/2/28 11:22:47

VS2022项目复制后报错打不开？别慌，手把手教你用记事本5分钟修复.sln文件

VS2022项目复制后报错打不开&#xff1f;记事本5分钟修复.sln文件全指南 刚复制完的VS2022项目一打开就报错&#xff1f;解决方案资源管理器一片空白&#xff1f;别急着重装或放弃&#xff0c;这很可能只是.sln文件中的路径需要手动更新。作为经历过数十次类似问题的开发者&…...

编程新知 2026/3/26 21:19:53

别再手动调坐标轴了！Excel两列数据一键生成折线图的正确姿势（附散点图对比）

Excel两列数据可视化&#xff1a;折线图与散点图的精准选择与高效操作 每次月度汇报前&#xff0c;你是否也经历过这样的场景&#xff1f;面对两列关键业务数据&#xff0c;明明只是简单画个趋势图&#xff0c;却在调整坐标轴上耗费半小时——选错图表类型导致横纵坐标错位&…...

编程新知 2026/3/26 21:17:53

保姆级教程：在Jeecg-Vue3项目中快速集成SuperQuery高级查询组件（含完整配置代码）

Jeecg-Vue3项目实战&#xff1a;SuperQuery高级查询组件深度集成指南 在后台管理系统开发中&#xff0c;高效的数据筛选功能直接影响用户体验和操作效率。Jeecg-Vue3作为企业级快速开发框架&#xff0c;其内置的SuperQuery组件能够帮助开发者快速构建复杂的多条件查询面板。本文…...

编程新知 2026/3/26 21:07:51

B2B品牌战略方法拆解：客户层、业务层、价值层、证据层怎么串起来

一个有点反常识的判断是&#xff1a;真正拉开差距的&#xff0c;常常不是你有多少材料、多少动作、多少名字&#xff0c;而是你能不能先把最关键的判断结构做出来。B2B品牌战略一旦结构对了&#xff0c;后面的内容、渠道和场景才会越做越顺。B2B品牌战略是什么&#xff1a;围绕…...

编程新知 2026/3/26 20:01:35

AI Agent与传统RPA工具区别：深度解析企业智能自动化的代际跃迁

在人工智能技术从大语言模型的“对话式交互”向“行动式智能体”跨越的关键周期内&#xff0c;AI Agent&#xff08;智能体&#xff09;与传统 RPA&#xff08;机器人流程自动化&#xff09;工具的区别已成为企业数字化转型的核心议题。这一区别不仅体现在技术架构的演进上&…...

编程新知 2026/3/26 18:24:29

SpringBoot WebSocket 客户端断线重连：从心跳检测到优雅恢复

1. WebSocket与实时通信的挑战 想象一下你正在玩一款多人在线游戏&#xff0c;突然网络卡顿导致角色掉线&#xff0c;重新登录后发现之前的战斗进度全部丢失——这种糟糕体验正是WebSocket重连机制要解决的问题。WebSocket作为HTTP的"升级版"&#xff0c;确实解决了服…...

编程新知 2026/3/26 17:07:21

Win11虚拟机密码重置保姆教程：VirtualBox+系统备份双保险

Win11虚拟机密码重置与系统防护全指南&#xff1a;VirtualBox实战策略 在数字化工作环境中&#xff0c;虚拟机已成为隔离测试环境、保障系统安全的标配工具。当我们因各种原因遗忘Windows 11虚拟机密码时&#xff0c;传统物理机的解决方案往往无法直接套用。本文将深入探讨基于…...

编程新知 2026/3/26 16:55:18

3步突破设备壁垒：让VR内容在普通显示器上重生的开源方案

3步突破设备壁垒&#xff1a;让VR内容在普通显示器上重生的开源方案 【免费下载链接】VR-reversal VR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址: https://gitcode.com/gh_…...

编程新知 2026/3/26 16:33:14

Logisim实战：从零到一构建MIPS32控制器核心模块

1. 初识MIPS32控制器设计 第一次接触MIPS32控制器设计时&#xff0c;我完全被那些密密麻麻的电路图和晦涩的指令格式搞懵了。记得当时在头歌平台上做实验&#xff0c;盯着Logisim界面整整半小时都不知道从何下手。后来才发现&#xff0c;理解控制器核心模块其实就像搭积木&…...

编程新知 2026/3/26 16:10:54

Wan2.2-I2V-A14B高性能实践：10核CPU+120GB内存协同优化视频推理稳定性

Wan2.2-I2V-A14B高性能实践&#xff1a;10核CPU120GB内存协同优化视频推理稳定性 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为高性能文生视频任务优化的私有部署镜像&#xff0c;针对RTX 4090D 24GB显存显卡和10核CPU120GB内存配置进行了深度优化。这个镜像解决了视频生…...

编程新知 2026/3/26 15:36:19