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}) ],
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/664108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[激光原理与应用-74]:数据采集卡 - 数模转换芯片AD7606

目录 一、简介 二、AD7606 三、AD7606的管脚定义如下&#xff1a; 三、c主要接口寄存器 四、AD7606数据带宽 五、AD7606 六、AD7606的使用 一、AD7606简介 AD7606是一款由Analog Devices&#xff08;ADI&#xff09;公司生产的16通道高速模拟数字转换器&#xff08;ADC…

课时12:shell基础_开发规范解读

1.3.6 脚本开发规范 学习目标 这一节&#xff0c;我们从 开发规范、规范解析、小结 三个方面来学习。 开发规范 脚本规范 1、脚本命名要有意义&#xff0c;文件后缀是.sh 2、脚本文件首行是而且必须是脚本解释器#!/bin/bash 3、脚本文件解释器后面要有脚本的基本信息等内容…

MongoDB从入门到实战之MongoDB快速入门

前言 上一章节主要概述了MongoDB的优劣势、应用场景和发展史。这一章节将快速的概述一下MongoDB的基本概念&#xff0c;带领大家快速入门MongoDB这个文档型的NoSQL数据库。 MongoDB从入门到实战的相关教程 MongoDB从入门到实战之MongoDB简介&#x1f449; MongoDB从入门到实战…

go_view同后端集成时的注意事项

goview是一个不错的可视化大屏配置工具;提供了丰富的功能可供调用。 官方地址和文档: https://gitee.com/dromara/go-view https://www.mtruning.club/guide/start/ 同nodejs集成可参考;https://gitee.com/qwdingyu/led (建议–后端集成有api功能,可直接配置sql)同dotne…

力扣面试题 17.11. 单词距离(双指针)

Problem: 面试题 17.11. 单词距离 文章目录 题目描述思路复杂度Code 题目描述 思路 Problem力扣面试题 16.06. 最小差 该题目只需预先做一些处理&#xff0c;即可以转换为上述题目&#xff1a; 1.预处理操作&#xff1a;定义两个数组w1ps&#xff0c;w2ps用于记录在words数组中…

【ARM Coresight 系列文章 8.1 - ARM Coresight 通过 APBIC arbiter】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 APBIC arbiter仲裁使用举例APBIC arbiter 在 SoC-600中,APBIC 是用来为 APB4 master 和 APB4 slave 提供 连接关系的组件。APB 是一种简单的总线协议,通常用于低带宽或低性能外设,如定时器、接口控制等。APBIC …

查找二叉树结点C++,数组模拟二叉树

已知一棵二叉树用邻接表结构存储&#xff0c;中序查找二叉树中权值为 x 的结点&#xff0c;并指出该结点在中序遍历中的排列位置。 例&#xff1a;如图二叉树的数据文件的数据格式如下: 输入格式 第一行包含整数 n&#xff0c;表示二叉树的结点数&#xff0c;结点编号从 1 到…

项目学习——canvas标签

canvas在本次项目中是重难点&#xff0c;经过这次项目我对canvas也有了部分认识&#xff0c;学习中没有查canvas标签的名字&#xff0c;因此&#xff0c;我将他称为画布标签。 首先&#xff0c;canvas的宽高与其他标签不同&#xff0c;他的宽高是标签内属性&#xff0c;在我使…

Arduino控制器使用Udp网络对8路IO输出控制

一、实现功能 1、创建串口连接&#xff0c;将接收的Udp数据通过串口发送出去。 2、创建Udp连接&#xff0c;用以接收Udp数据和对发送数据的Udp机器反馈Udp数据 3、对接收到的Udp数据进行解析&#xff0c;然后对8路IO进行输出控制。 4、1对应IO输出低电平&#xff0c;‘0’对…

LeetCode第824题 - 山羊拉丁文

题目 解答 String toGoatLatin(String S) {if (S null) {return "";}S S.trim();if (S.isEmpty()) {return "";}StringBuilder sb new StringBuilder();String[] tokens S.split(" ");for (int i 0, j 1, length tokens.length; i <…

stack_queue:三个关键注意事项解析

一、stack与容器 template<class T, class Container> class stack { private:Container _con; };Container 为容器&#xff0c;在实例化创建对象时&#xff0c;我们可以传 vector<T> 或 list<T> 等作为栈的底层。 举例&#xff1a; int main() {stack<i…

DES加密解密算法(简单、易懂、超级详细)

目录 一、基础补充 二、什么是DES算法 &#xff08;1&#xff09;对称加密算法 &#xff08;2&#xff09;非对称加密算法 &#xff08;3&#xff09;对称加密算法的应用 三、DES算法的基础操作步骤 1.明文的加密整体过程 2.F轮函数解析 3.密钥的形成过程 四、AC代码 五、D…

Python爬虫学习之requests库

目录 一、requests的基本使用 二、get请求 三、post请求 四、代理的使用 五、cookie登录以及验证码图片识别 一、requests的基本使用 import requestsurl http://www.baidu.comresponse requests.get(url url)#一个类型和六个属性 #Response类型 #print(type(response…

PHP之PDO_MYSQL扩展安装步骤

1&#xff0c;如果有php源码包可以不用下载&#xff0c;在 源码包下的 ext/ 下面可以找到 cd php-8.1.9/ext/pdo_mysql 2,如果存在&#xff0c;直接安装 /usr/local/php-8.1.9/bin/phpize ./configure --with-php-config/usr/local/php-8.1.9/bin/php-config make &&a…

代码随想录算法训练营29期Day41|LeetCode 343,96

文档讲解&#xff1a;整数拆分 不同的二叉搜索树 343.整数拆分 题目链接&#xff1a;https://leetcode.cn/problems/integer-break/description/ 思路&#xff1a; 题目要求我们拆分n&#xff0c;拆成k个数使其乘积和最大&#xff0c;然而题目中并没有给出k&#xff0c;所以…

leetcode-用队列实现栈

225. 用队列实现栈 我们先简单了解下栈与队列的区别&#xff1a; 操作方式&#xff1a;栈是一种后进先出(Last In First Out, LIFO)的数据结构&#xff0c;只允许在栈顶进行插入和删除操作。而队列是一种先进先出(First In First Out, FIFO)的数据结构&#xff0c;规定在队尾…

【Mysql】事务的隔离级别与 MVCC

事务隔离级别 我们知道 MySQL 是一个 C/S 架构的服务&#xff0c;对于同一个服务器来说&#xff0c;可以有多个客户端与之连接&#xff0c;每个客户端与服务器连接上之后&#xff0c;就是一个会话&#xff08; Session &#xff09;。每个客户端都可以在自己的会话中向服务器发…

【水文】求解排列组合

#include <stdio.h> // 计算阶乘 int factorial(int n) { int result 1; for (int i 1; i < n; i) { result * i; } return result; } // 计算组合数 int combination(int n, int r) { return factorial(n) / (factorial(r) * factor…

如何使用VSCode上运行Jupyter,详细案例过程出可视化图

Python作为最受AI喜欢的语言之一&#xff0c;我们与大家共同学习下如何在VS Code上运行Jupyter&#xff0c;并且用简单案例实现出图。 环境 VS Code version: 1.80.1 Python: 3.12.0 小白安装过程&#xff1a; 在准备好基础环境&#xff0c;小白心想&#xff0c;AI可是霸占科…

Loadbalancer如何优雅分担服务负荷

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Loadbalancer如何优雅分担服务负荷 前言Loadbalancer基础&#xff1a;数字世界的分配大师1. 分发请求&#xff1a;2. 健康检查&#xff1a;3. 会话保持&#xff1a;4. 可伸缩性&#xff1a;5. 负载均衡…