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

rollup环境配置

news 2026/5/12 7:48:07

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

Midjourney V6水彩模式突然失效？紧急修复方案：3个隐藏--style参数+2个替代性sref锚点+1键重置工作流

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney V6水彩模式失效的真相溯源 Midjourney V6 发布后&#xff0c;大量用户反馈 --style watercolor 参数不再触发预期的水彩渲染效果&#xff0c;生成图像趋于写实或默认风格。这一现象并非 UI …...

编程新知 2026/5/12 6:16:38

别再全网搜了！企业微信后台三步找到你的CorpID和Secret（附AccessToken一键生成工具）

企业微信开发实战&#xff1a;3分钟获取CorpID与Secret的终极指南 第一次接触企业微信API开发时&#xff0c;最让人头疼的莫过于找不到CorpID和Secret这两个关键凭证。官方文档信息分散&#xff0c;后台界面又不够直观&#xff0c;很多开发者在这个环节浪费了大量时间。本文将…...

编程新知 2026/5/12 5:52:22

基于矩阵分解与独立向量分析的深度神经网络后门攻击检测方法

1. 项目概述&#xff1a;当深度神经网络遭遇“潜伏者”在深度神经网络&#xff08;DNN&#xff09;如卷积神经网络&#xff08;CNN&#xff09;、Transformer模型等成为计算机视觉、自然语言处理乃至语音识别领域基石的今天&#xff0c;我们享受着其带来的高精度与自动化红利。…...

编程新知 2026/5/12 5:35:33

别再只会用Matplotlib画基础热力图了！这5个高级定制技巧让你的图表更专业

别再只会用Matplotlib画基础热力图了&#xff01;这5个高级定制技巧让你的图表更专业 热力图是数据可视化中最直观的展示方式之一&#xff0c;但大多数数据分析师止步于基础用法。当你的图表需要出现在学术论文、商业报告或投资人演示中时&#xff0c;默认参数生成的热力图往往…...

编程新知 2026/5/12 5:33:27

【DeepSeek Service Mesh安全白皮书首发】：零信任网络策略如何实现API级微隔离与自动证书轮转？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek Service Mesh安全白皮书发布背景与核心价值 随着云原生架构在金融、政务及大规模企业级场景中深度落地&#xff0c;服务间通信的可信性、策略一致性与零信任合规性已成为架构演进的关键瓶颈。…...

编程新知 2026/5/12 5:29:00

模拟仿真技术在现代集成电路设计中的挑战与解决方案

1. 模拟仿真技术面临的现代挑战在当今集成电路设计领域&#xff0c;模拟仿真技术正面临前所未有的挑战。随着工艺节点从130nm一路演进到15nm甚至更小尺寸&#xff0c;设计复杂度呈指数级增长。我曾参与过多个采用28nm工艺的混合信号芯片项目&#xff0c;深刻体会到传统SPICE仿真…...

编程新知 2026/5/12 5:06:03

浏览器端微信使用指南：告别繁琐安装，开启轻量沟通新时代

浏览器端微信使用指南&#xff1a;告别繁琐安装&#xff0c;开启轻量沟通新时代 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 还在为微信PC版的庞大…...

编程新知 2026/5/12 4:00:10

惠普开发了一架3D打印无人机，超轻、超快组装、成功试飞！

3D打印技术参考注意到&#xff0c;惠普于日前自行开发了一架基于增材制造设计的结构优化无人机&#xff0c;来展示使用其MJF技术进行3D打印制造的巨大潜力。它的核心观点是&#xff0c;无人机开发与制造的一个重大挑战&#xff0c;是团队花了几个月时间进行的优化设计&#xff…...

编程新知 2026/5/12 3:54:08

LSP4J-MCP：连接语言服务器与AI的协议桥接器实践

1. 项目概述&#xff1a;当LSP遇上MCP&#xff0c;一场开发工具链的“协议融合”如果你是一名长期与IDE打交道的开发者&#xff0c;无论是写Java、TypeScript还是其他语言&#xff0c;大概率都听说过或者用过语言服务器协议。它让VS Code、IntelliJ IDEA这些编辑器能理解代码、…...

编程新知 2026/5/12 2:25:57

阴阳师御魂自动刷脚本：5分钟快速上手的智能挂机指南

阴阳师御魂自动刷脚本&#xff1a;5分钟快速上手的智能挂机指南 【免费下载链接】yysScript 阴阳师脚本 支持御魂副本 双开 项目地址: https://gitcode.com/gh_mirrors/yy/yysScript 还在为重复刷御魂副本而感到疲惫吗&#xff1f;yysScript智能挂机脚本是专为《阴阳师》…...

编程新知 2026/5/12 0:20:46