npm安装vite？npm安装pnpm？

本文目录一览：

• 1、Vite工具工作原理及落地步骤
• 2、vite打包原生js最简单的方法
• 3、vue读取excel数据、将json数据导出到excel文件中

Vite工具工作原理及落地步骤

1、Vite将预绑定源文件以加快页面加载npm安装vite，并将CommonJS/UMD模块转换为ESM（ES模块）。为了允许浏览器在不引发错误的情况下导入模块，Vite还会将导入重写为有效的URL（如/node_modules/.vite/my-dep.jsnpm安装vite？v=f3sf2ebb）。

2、Vite原理基于ESM（ECMAScript Modules）和esbuild，实现通过服务器拦截ESM请求，处理依赖、静态资源加载、Vue文件缓存，并利用WebSocket技术进行热更新。Vite在处理JavaScript和TypeScript时，使用esbuild提高编译速度，但需要注意，虽然转换速度快，类型检查功能有限，需额外进行类型检查以确保代码质量。

3、研究 vite 源码后发现，vite 支持裸导入 node_modules 里的包。其原理是，开发阶段通过重写 import 语句，将裸导入转换为正确的导入；构建阶段使用 rollup 打包依赖。接下来，将模仿 vite 实现，使浏览器支持裸导入。首先创建测试用例，通过 marked 工具将 md 转换为 html，并输出到控制台。

vite打包原生js最简单的方法

1、使用Vite命令进行打包：在项目的根目录下，打开终端或命令行工具。运行npm run build命令来打包JavaScript库。Vite将根据你在vite.config.js文件中的配置，将指定的入口文件打包成多种格式的库文件，并输出到dist目录下。验证打包后的库文件：打包完成后，检查dist目录下生成的库文件。确保这些文件存在且内容正确。你可以在其他项目中引入并使用这个库来验证其功能是否如预期。

2、调整项目结构 方法：将不希望被拷贝的文件夹从public目录中移出，放到项目的其他位置。说明：这是最简单直接的方法。由于Vite只会将public目录中的内容复制到输出目录，因此将不需要的文件夹移出该目录即可避免其被拷贝。在代码中，可以通过相对路径或绝对路径来引用这些资源。

3、在Vite打包过程中，文件通常默认被存放在单一文件夹内。配置选项也可能是默认设置。然而，若希望建立特定的文件路径结构，如将所有图片资源分放至特定文件夹，可以通过调整vite.config.js中的build.assetFileNames配置来实现。Vite的配置选项output.assetFileNames能让你自定义构建输出的资源文件名。

4、纯 js 项目简单，只需 export 输出即可；带模板项目同样遵循此规则，使用 vite 创建项目，建立测试文件，设置入口文件。设置 vite.config.js 根据项目需求在 vite.config.js 中配置打包设置，打包模式分为两种。第三方插件处理 使用 external 配置将第三方插件代码以 import 方式引用，避免打包体积增加。

5、按需引入 antdesignvue 优化点：将 antdesignvue 从全量引入改为按需引入。 效果：可以显著减少打包后的文件体积。分离 echarts 打包 优化点：分析打包文件，发现 index.js 包含了 echarts，尝试将 echarts 分离打包。 操作：通过修改 vite.config.ts 文件实现 echarts 的单独分离。

6、在项目根目录下，通过终端运行npm run build命令，Vite会将项目打包为静态文件，并生成一个dist文件夹。选择合适的服务器：根据需求选择自己搭建的服务器或使用云服务器提供商的服务，如阿里云、腾讯云等。上传文件到服务器：使用FTP上传、SSH上传或云平台提供的工具，将dist文件夹上传到服务器的指定目录。

vue读取excel数据、将json数据导出到excel文件中

1、配置vite：在vite.config.js中，添加`transform： { require： [vite-plugin-require-transform] }`到构建配置中。接下来，我们来看代码实现。在你的项目中，创建一个名为fileHandle.vue的文件，用于读取和导出excel数据。

2、安装命令：npm install filesaver 或 yarn add filesaver。读取Excel数据：创建一个名为excelReaderFile.js的文件，并编写读取Excel数据的函数。使用fetch函数获取Excel文件，并通过XLSX.read函数将其解析为工作簿对象。使用XLSX.utils.sheet_to_json函数将工作簿的第一个工作表转换为JSON数据。

3、前端处理Excel数据以转为JSON格式，成为数据操作和分析的关键步骤。通过npm或yarn安装Blob.js和Export2Excel.js两个依赖包，为解析Excel数据做准备。在src目录下建立Excel文件，将Blob.js和Export2Excel.js文件放入其中。具体文件路径为：文件提取码：kk8a。若对此操作不熟悉，可参考相关教程深入了解。

4、首先导入xlsx上传组件，使用element-plus的el-upload组件进行代码实现，部分结果如下。对文件进行读取，并通过判断后缀来确认是否为excel文件。接着读取数据，将其转换为json格式。定义dealExcel函数，专门处理表格中的中文表头，将其转化为相应的key值。最后将处理的步骤转化为一个array数组，并输出。

5、通过import语句直接导入JSON文件 这种方法适用于在编译时就已经知道要加载哪个JSON文件的情况。例如，可以在Vue项目中创建一个名为json的文件夹，用于存放本地的JSON文件。然后，在Vue组件中直接使用import语句导入该JSON文件。