VUE3源码分析————rollup打包遇见问题

一、require无法使用

在使用rullup打包的过程中,我们需要在最外层的package.json文件中指定一下在这里插入图片描述
加上这句话是规定我们打包的是一个模块,但是由于require并不是一个模块
所以无法使用,可以使用import代替或者将其转化为模块

// 讲require转换为模块
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

fs模块

import * as fs from 'fs';

二、The requested module ‘xxx’ does not provide an export named ‘default’

这个是因为该模块没有默认暴露,跟视频学的话可能因为版本的问题改了吧

import execa from 'execa'
//改为
import { execa } from 'execa'

三、__filename无法使用

这个还是因为模块的原因

import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

四、path.resolve() arguments must be a string

这个是因为你path.resolve传递的必须是一个字符串,那是因为path.resolve接受的参数中有一个是undefined无法读取

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以按照以下步骤使用 Rollup 打包 Vue 3 Vite 项目: 1. 首先,确保你已经安装了 Rollup 和相关的插件。可以使用以下命令进行安装: ```shell npm install --save-dev rollup rollup-plugin-vue@next rollup-plugin-terser ``` 2. 在项目根目录下创建一个 `rollup.config.js` 文件。 3. 在 `rollup.config.js` 文件中,导入必要的插件和模块: ```javascript import { defineConfig } from 'rollup'; import vue from 'rollup-plugin-vue'; import { terser } from 'rollup-plugin-terser'; ``` 4. 定义 Rollup 配置: ```javascript export default defineConfig({ input: 'src/main.js', // 入口文件路径 output: { file: 'dist/bundle.js', // 输出文件路径 format: 'iife', // 输出模块格式 name: 'MyApp', // 全局变量名称(可选) }, plugins: [ vue(), // 处理 .vue 单文件组件 terser(), // 压缩代码(可选) ], }); ``` 这里的 `input` 配置应该指向你项目中的入口文件,一般是 `main.js` 或者 `index.js`。`output` 配置指定了打包后的输出文件路径和格式,这里使用了立即执行函数(IIFE)格式,你可以根据需要选择其他格式。`name` 可选,它指定了全局变量名称,如果你希望在浏览器中直接引入打包后的文件,可以设置该值。 5. 在项目的 `package.json` 文件中添加一个脚本命令以运行 Rollup: ```json { "scripts": { "build": "rollup -c" } } ``` 6. 运行以下命令进行打包: ```shell npm run build ``` 打包完成后,你将在 `dist` 目录下找到打包后的文件。 这样,你就可以使用 Rollup 打包 Vue 3 Vite 项目了。如果需要更详细的配置,可以参考 Rollup 和相关插件的文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值