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

rollup环境配置

news 文章来源：https://blog.csdn.net/qq_52476758/article/details/129239100 2024/11/25 20:52:09

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

cityengine自定义纹理库资源

背景 cityengine虽然可以将shp生成带纹理的三维模型，但是纹理不一定满足我们的要求，这时候我们就想用我们自己制作的纹理 粗略了解规则文件 了解Building_From_Footprint.cga这个规则文件，具体文件位置默认在 “C:\Users[电脑用户名：如Administrator]\Documents\CityEng…...

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

taobao.top.secret.bill.detail( 服务商的商家解密账单详情查询 )

&#xffe5;免费必须用户授权 服务商的商家解密账单详情查询&#xff0c;仅对90天内的账单提供SLA保障。 公共参数 请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 公共响应参数: 请求参数 响应参数 点击获取key和secret 请求示例 TaobaoClient…...

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

2023软件测试金三银四常见的软件测试面试题-【抓包和网络协议篇】

八、抓包与网络协议 8.1 抓包工具怎么用 我原来的公司对于抓包这块&#xff0c;在App的测试用得比较多。我们会使用fiddler抓取数据检查结果&#xff0c;定位问题&#xff0c;测试安全&#xff0c;制造弱网环境; 如&#xff1a;抓取数据通过查看请求数据&#xff0c;请求行&…...

编程日记 2023/2/28 11:19:20

vue脚手架多页自动化生成实践

前言 在前端开发过程中&#xff0c;常常面对多种业务场景。到目前为止&#xff0c;前端对于不同场景的处理通常会采用不同的渲染方案来组合处理&#xff0c;常见的渲染方案包括&#xff1a;CSR(Client Side Rendering)、SSR(Server Side Rendering)、SSG(Static Site Generati…...

编程日记 2023/2/28 11:18:14

【SQL语句优化】

SQL语句优化是提高数据库查询性能的重要手段之一&#xff0c;下面是几种常见的SQL语句优化方法和案例&#xff1a; 减少查询的数据量 减少查询的数据量&#xff1a;使用 WHERE 子句和索引来限制检索行数&#xff0c;只检索需要的行&#xff0c;避免检索全部行数据。 例子&am…...

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

阿里P8：做测试10年我的一些经验分享，希望你们少走弯路

我是在2015年毕业的&#xff0c;当时是读的普通本科&#xff0c;不上不下的专业水平&#xff0c;毕业的时候&#xff0c;恰好遇到了金融危机。校园招聘里阴差阳错的巧合&#xff0c;让我走上了软件测试工程师的道路。 入职第一天&#xff0c;来了个高大上的讲师&#xff0c;记…...

编程日记 2023/2/28 11:15:59

栈在括号匹配中的应用(栈/链栈 纯C实现)

目录 1 问题背景 2 具体思路 3 代码实现 3.1 顺序栈实现 3.2 链栈实现 1 问题背景 栈的括号匹配问题是指在给定一个字符串&#xff08;包含多种括号&#xff09;&#xff0c;判断其中的括号是否能够正确匹配&#xff0c;即每个左括号是否有一个对应的右括号与之匹配&#x…...

编程日记 2023/2/28 11:14:51

C语言Switch语句用法

C switch 语句 一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case&#xff0c;且被测试的变量会对每个 switch case 进行检查。 语法 C 语言中 switch 语句的语法&#xff1a; switch(expression){case constant-expression :statement(s);break;…...

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

Curl编码请求参数，API接口请求示例参数

请求参数请求参数&#xff1a;num_iid610947572360 参数说明&#xff1a;num_iid:1688商品ID sales_data:&sales_data1 获取近30天成交数据 agent:&agent1 获取1688分销代发价格数据请求示例 测试入口 Curl PHP PHPsdk JAVA C# Python-- 请求示例 url 默认请求参数已经…...

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

【C/C++】类型限定符extern、const、Volatile、register

1、extern&#xff1a; 声明一个变量&#xff0c;extern声明的变量没有建立存储空间。 extern int a ; //变量在定义的时候创建存储空间。 ①当我们在编译器中试图运行以下代码&#xff0c;系统会报错。 错误原因是“无法解析外部符号_a”.系统认为变量a是没有开辟内存空间的…...

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

婚恋网站女孩子做美容/网站推广工具有哪些

MyBatis获取参数值MyBatis获取参数值的两种方式单个字面量类型的参数多个字面量类型的参数map集合类型的参数实体类类型的参数使用Param标识参数总结MyBatis获取参数值的两种方式 MyBatis获取参数值的两种方式&#xff1a; ${}的本质就是字符串拼接#{}的本质就是占位符赋值 ${…...

编程日记 2024/11/25 15:55:42

jsp怎样做网站/seo图片优化的方法

使用Eclipse在线安装的方式&#xff1a;Help-->Install New Software 地址输入&#xff1a;http://m2eclipse.sonatype.org/sites/m2e/&#xff0c;列表中打勾勾上后点击Next 安装maven插件时遇到了如下的错误&#xff1a; Cannot complete the install because one or mor…...

编程日记 2024/11/25 15:44:22

叫人做网站后不提供源码/网站关键词seo费用

Photoshop是当前最风行的图形图像处理软件&#xff0c;现在已广泛利用于广告、平面设计、网页等范畴。在网页设计中&#xff0c;Photoshop可用来设计网页页面。将设计好的页面导进到Dreamweaver 中进行处理&#xff0c;再用Flash 添加动间内容&#xff0c; Photoshop是当前最风…...

编程日记 2024/11/25 14:45:11

西安做网站-西安网站建设-西安网站制作-西安网络公司_千秋网络/seo搜索引擎推广什么意思

为什么分 在正式开始之前&#xff0c;菜菜还是要强调一点&#xff0c;你的数据表是否应该分&#xff0c;需要综合考虑很多因素&#xff0c;比如业务的数据量是否到达了必须要切分的数量级&#xff0c;是否可以有其他方案来解决当前问题&#xff1f;我不止一次的见过&#xff0c…...

编程日记 2024/11/25 13:53:50

工厂怎么找外贸公司/搜索引擎优化的含义

一、线程的不安全问题如何产生&#xff1f; 当多个线程 都需要处理共享资源,其中一个线程在处理过程中没有执行完&#xff0c;其他线程已经参与进来。则会导致线程的不安全问题 二、如何解决线程的不安全问题&#xff1f; 上锁&#xff01; 当一个线程在处理共享资源时&…...

编程日记 2024/11/25 12:48:05

wordpress如何设置外网访问/免费seo教程分享

简介 此篇用于整理在软件开发过程中以及学习过程中整理的一系列问题以及解决办法。将会持续保持更新。 20220623-什么是api&#xff0c; 什么是sdk api英文全称是 application program interface&#xff0c; 应用程序接口 sdk英文全称是 software development kit&#xff…...

编程日记 2024/11/25 5:57:50