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

rollup环境配置

news 2026/2/9 18:19:50

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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06