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

node环境打包js,webpack和rollup两个打包工具打包,能支持vue

引言
项目中经常用到共用的js,这里就需要用到共用js打包,这篇文章讲解两种打包方式,webpack打包和rollup打包两种方式

1、webpack打包js

1.1 在根目录创建 webpack.config.js,配置如下

const path = require('path');
module.exports = {entry: './index.js', output:{filename:'index.js',path:path.resolve(__dirname,'dist'),library: 'myModule',libraryTarget:'umd'},// 以下代码为新添加代码module:{rules:[{test: /\.js$/, // 匹配所有 js 文件loader: 'babel-loader' // 使用 babel-loader 处理 js 文件},]},
};

1.2 安装依赖包 package.json

npm install @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime 这里用来将es6转成es5
npm install webpack webpack-cli

{"main": "index.js","scripts": {"buildwebpack": "webpack"},"devDependencies": {"@babel/core": "^7.23.9","@babel/preset-env": "^7.23.9","babel-loader": "^9.1.3","webpack": "^5.90.0","webpack-cli": "^5.1.4"},"dependencies": {"@babel/plugin-transform-runtime": "^7.23.9"}
}

1.3 配置 babel.config.js

const presets = [["@babel/env",{targets: {ie: "6",edge: "17",firefox: "60",chrome: "67",safari: "11.1"},//useBuiltIns: "usage",//corejs: "3", // <---  此处加个这个,就没有报错警告了},],
];module.exports = { presets,"plugins": ["@babel/transform-runtime"]
};

1.4 webpack 支持vue

“vue-loader”: “^15.11.1”,
“vue-template-compiler”: “^2.6.12” //需要和vue版本一致
npm install vue-loader@15 vue-template-compiler@2 vue@2 css-loader

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {entry: './index.js', output:{filename:'index.js',path:path.resolve(__dirname,'dist'),library: 'myModule',libraryTarget:'umd'},// 以下代码为新添加代码module:{rules:[{test: /\.js$/, // 匹配所有 js 文件loader: 'babel-loader' // 使用 babel-loader 处理 js 文件},{test: /\.vue$/, loader: 'vue-loader'},
//    { test: /\.css$/, 
//      use: ['style-loader','css-loader' ]
//    },]},//需要注意的点:vue-loader 15版本需加入插件plugins: [new VueLoaderPlugin()]
};

2、rollup 打包js

2.1 在根目录创建 rollup.config.js,配置如下

import babel from 'rollup-plugin-babel';
export default {input: 'index.js',output: {file: 'lib/index.js',format: 'cjs',},plugins: [ babel({runtimeHelpers: true, presets: ["@babel/preset-env"],}) ],
};

2.2 安装依赖包 package.json

npm install @babel/core @babel/preset-env 这里用来将es6转成es5
npm install rollup rollup-plugin-babel

{"main": "index.js","scripts": {"buildrollup": "rollup -c",},"devDependencies": {"@babel/core": "^7.23.9","@babel/preset-env": "^7.23.9","babel-loader": "^9.1.3"},"dependencies": {"@babel/plugin-transform-runtime": "^7.23.9","rollup": "^2.79.1","rollup-plugin-babel": "^4.4.0"}
}

2.4 rollup 打包vue

rollup-plugin-vue^5.1.9 + vue-template-compiler
rollup-plugin-postcss 识别css和预处理文件
npm install rollup-plugin-vue@5 vue-template-compiler rollup-plugin-postcss

export default {input: 'index.js',output: {file: 'lib/index.js',format: 'cjs',},plugins: [ babel({runtimeHelpers: true, presets: ["@babel/preset-env"],}),vue2({css:true,compilerTemplate: true,preprocessStyles: true}) ],
};

相关文章:

node环境打包js,webpack和rollup两个打包工具打包,能支持vue

引言 项目中经常用到共用的js&#xff0c;这里就需要用到共用js打包&#xff0c;这篇文章讲解两种打包方式&#xff0c;webpack打包和rollup打包两种方式 1、webpack打包js 1.1 在根目录创建 webpack.config.js&#xff0c;配置如下 const path require(path); module.expo…...

图数据库 之 Neo4j - 图数据库基础(2)

图数据库是一种专门用于存储、管理和查询图数据的数据库。与传统的关系型数据库不同&#xff0c;图数据库以图的形式存储数据&#xff0c;其中节点表示实体&#xff0c;边表示实体之间的关系。这种图数据模型非常适合表示复杂的关系和连接。 图数据库的定义和特点 图数据库是一…...

20240202在Ubuntu20.04.6下配置环境变量之后让nvcc --version显示正常

20240202在Ubuntu20.04.6下配置环境变量之后让nvcc --version显示正常 2024/2/2 20:19 在Ubuntu20.04.6下编译whiper.cpp的显卡模式的时候&#xff0c;报告nvcc异常了&#xff01; 百度&#xff1a;nvcc -v nvidia-cuda-toolkit rootrootrootroot-X99-Turbo:~/whisper.cpp$ WH…...

数字孪生网络攻防模拟与城市安全演练

在数字化浪潮的推动下&#xff0c;网络攻防模拟和城市安全演练成为维护社会稳定的不可或缺的环节。基于数字孪生技术我们能够在虚拟环境中进行高度真实的网络攻防模拟&#xff0c;为安全专业人员提供实战经验&#xff0c;从而提升应对网络威胁的能力。同时&#xff0c;在城市安…...

LeetCode、62.不同路径的数目(一)【简单,动态规划或递归】

文章目录 前言LeetCode、62.不同路径的数目(一)【简单&#xff0c;动态规划或递归】题目描述与分类思路思路1&#xff1a;动态规划思路2&#xff1a;递归实现简洁写法补充&#xff1a;2024.1.30 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、…...

re:从0开始的CSS学习之路 4. 长度单位

1. 长度单位 像素px&#xff1a;一个像素就是屏幕中一个不可分割的点。我们应用的屏幕实际上是由一个个的像素点构成的。 不同显示器的像素点大小也不同&#xff0c;在屏幕尺寸相同的情况下&#xff0c;像素越小&#xff0c;显示效果越清晰。 大部分浏览器默认字体大小是16px …...

golang开源定时任务调度框架

golang开源定时任务调度框架 Go语言中有很多开源的定时任务调度框架&#xff0c;以下几个是比较流行常用的&#xff1a; golang开源定时任务框架介绍 cron 一个基于Cron表达式的定时任务库&#xff0c;可以精确到秒级。它提供了简单易用的API来定义和管理定时任务&#xff…...

GridModel事件集合——yonBIP低代码

我们接着看表格相关的事件&#xff0c;用友的文档打不开&#xff0c;真的是天大的404&#xff0c;客观请看这个开发文档网址&#xff0c;找不到了&#xff0c;你说holy 不咯&#xff1f;http://tinper.org/mdf/&#xff08;如果有哪位小伙伴知道这个地址是不是迁移了的话&#…...

苹果macbook电脑删除数据恢复该怎么做?Mac电脑误删文件的恢复方法

苹果电脑删除数据恢复该怎么做&#xff1f;Mac电脑误删文件的恢复方法 如何在Mac上恢复误删除的文件&#xff1f;在日常使用Mac电脑时&#xff0c;无论是工作还是娱乐&#xff0c;我们都会创建和处理大量的文件。然而&#xff0c;有时候可能会不小心删除一些重要的文件&#x…...

2024年R2移动式压力容器充装证模拟考试题库及R2移动式压力容器充装理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年R2移动式压力容器充装证模拟考试题库及R2移动式压力容器充装理论考试试题是由安全生产模拟考试一点通提供&#xff0c;R2移动式压力容器充装证模拟考试题库是根据R2移动式压力容器充装最新版教材&#xff0c;R2…...

云开发超多功能工具箱组合微信小程序源码/附带流量主

这是一款云开发超多功能工具箱组合微信小程序源码附带流量主功能&#xff0c;小程序内包含了40余个功能&#xff0c;堪称全能工具箱了&#xff0c;大致功能如下&#xff1a; 证件照制作 | 垃圾分类查询 | 个性签名制作 二维码生成丨文字九宫格 | 手持弹幕丨照片压缩 | 照片编…...

挑战杯 python+深度学习+opencv实现植物识别算法系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的植物识别算法研究与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;4分 &#x1f9ff; 更多…...

pytest的常用插件和Allure测试报告

pytest常用插件 pytest-html插件 安装&#xff1a; pip install pytest-html -U 用途&#xff1a; 生成html的测试报告 用法&#xff1a; ​在.ini配置文件里面添加 addopts --htmlreport.html --self-contained-html 效果&#xff1a; 执行结果中存在html测试报告路…...

神经网络的权重是什么?

请参考这个视频https://www.bilibili.com/video/BV18P4y1j7uH/?spm_id_from333.788&vd_source1a3cc412e515de9bdf104d2101ecc26a左边是拟合的函数&#xff0c;右边是均方和误差&#xff0c;也就是把左边的拟合函数隐射到了右边&#xff0c;右边是真实值与预测值之间的均方…...

C语言代码 在屏幕上输出9*9乘法口诀表

在屏幕上输出9*9乘法口诀表。 代码示例&#xff1a; #include <stdio.h>int main() {int i 0;for (i 1; i < 9; i)//打印所有行的循环{int j 0;for (j 1; j < i; j)//打印每一行中所有列的循环{printf("%d*%d%-2d ", i, j, i * j);//%-2d的意思是两…...

11.0 Zookeeper watcher 事件机制原理剖析

zookeeper 的 watcher 机制&#xff0c;可以分为四个过程&#xff1a; 客户端注册 watcher。服务端处理 watcher。服务端触发 watcher 事件。客户端回调 watcher。 其中客户端注册 watcher 有三种方式&#xff0c;调用客户端 API 可以分别通过 getData、exists、getChildren …...

HGAME 2024 WEEK 1 :web ezHTTP

题目&#xff1a; 看到这个就知道是文件头伪造 第一想法就是Referer伪造 所以伪造 Referer: vidar.club 然后构造伪造的Referer 然后提示通过那些东西访问页面&#xff0c;User-Agent: 是构造你浏览器访问信息的&#xff0c;所以复制右边那一串替代就好了 然后要求我们从本地…...

Linux【docker 设置阿里源】

文章目录 一、查看本地docker的镜像配置二、配置阿里镜像三、检查配置 一、查看本地docker的镜像配置 docker info一般没有配置过是不会出现Registry字段的 二、配置阿里镜像 直接执行下面代码即可&#xff0c;安装1.10.0以上版本的Docker客户端都会有/etc/docker 1.建立配置…...

app逆向-frida-rpc详解

Frida-RPC是Frida工具的一个组件&#xff0c;用于在应用程序和Frida脚本之间进行远程过程调用&#xff08;RPC&#xff09;。远程过程调用是一种允许应用程序的不同部分或不同的应用程序之间进行通信的方法。在Frida中&#xff0c;RPC通过JavaScript脚本和应用程序之间建立通信…...

计算机网络(第六版)复习提纲27

7 TCP流量控制 A 利用滑动窗口实现流量控制 所谓流量控制&#xff0c;就是让发送方发送速率不要太快&#xff0c;让接收方来得及接收 1 利用窗口进行流量控制 2 持续计时器和零窗口探测报文&#xff08;仅携带一字节的数据&#xff09; B TCP的传输效率&#xff08;TCP报文段的…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

大数据学习(132)-HIve数据分析

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

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...