将VITE添加到您现有的Web应用程序中

Vite，发音为“ Veet”，是现代的JavaScript Bundler，以其速度和易用性而闻名。这是一个强大的工具，需要最小的配置，但提供了广泛的自定义选项。本文详细介绍了将现有项目从另一个Bundler（例如WebPack）迁移到Vite。有关新项目，请参阅官方Vite文档。即使对于遗产迁移，首先建议首先制定一个简单的Vite项目，以更好地理解其结构。

从Webpack迁移到Vite

本指南反映了迁移一个长期，长期存在的Webpack项目的经验。该过程突出了Vite在过渡过程中的配置功能。

不必要的WebPack配置

Vite固有地处理许多任务通常需要广泛的WebPack配置。这消除了许多常见的WebPack插件和设置的需求。

静态资产处理

WebPack通常需要显式配置以加载静态资产（图像，字体等）：

 {
  测试： /\ .(png| jpg| gif| svg| eot| woff| woff| woff2| ttf)qun/，
  使用： [
    {
      加载程序：“文件加载程序”
    }
  这是给出的
}

Vite自动管理此操作。

造型（CSS/SCSS）

WebPack的样式配置可能很复杂：

 {
  测试： /\ s？css$/，
  使用：[MinicsSextrackPlugin.Loader，“ CSS-LOADER”，“ SASS-LOADER”]
}，，

// 之后

新的MinicsSextractPlugin（{filename：“ [name]  -  [contenthash] .css“}），

Vite本地支持CSS和SCSS；只需安装SASS，Vite处理其余的即可。

转卸（打字稿/JSX）

WebPack需要用于打字稿和JSX的转胶：

 {
  测试： /\ .(tmer
  排除： /node_modules /，
  装载机：“ babel-loader”
}，，

...带有相应的公告型配置。 Vite处理此开箱即用，支持现代JavaScript功能和打字稿。插件可用于较旧的浏览器支持。

节点模块分辨率

WebPack需要明确的配置来解决node_modules ：

解决： {
  模块：[path.resolve（“ ./ node_modules”）]]
}

Vite会自动处理此操作。

生产/开发模式

WebPack通常使用mode来区分环境：

模式：ISProd？ “生产”：“发展”，

Vite使用单独的命令（ vite用于开发， vite build for Production）。

文件扩展

WebPack通常需要指定文件扩展名：

解决： {
  扩展：[“ .ts”，“ .tsx”，“ .js”]，
}

Vite会自动处理常见扩展。

滚动插件兼容性

许多滚动插件与Vite兼容，为现有插件提供了平稳的过渡。请咨询Vite文档以获取兼容性信息。

设置您的第一个Vite项目

对于迁移现有项目，请从引用JavaScript条目文件的HTML输入点（例如， index.html ）开始。安装必要的插件（例如， @vitejs/plugin-react用于React Projects）。创建一个vite.config.ts文件：

从“ vite”导入{decteConfig};
导入从“@vitejs/plugin-react”中导入反应；

导出默认decteConfig（{
  插件：[react（）]
}）;

添加NPM脚本：

 “ dev”：“ vite”，
“构建”：“ Vite Build”，
“预览”：“ Vite Preview”，

使用npm run dev启动开发服务器。

高级配置：别名，环境变量和代理

别名

WebPack别名可以使用resolve.alias进行复制：Alias：

解决： {
  别名：{
    jscolor：path.resolve（“ ./ util/jscolor.js”），
    app：path.resolve（“ ./ app”），
    // ...更多别名
  }
}，，

环境变量

Vite使用import.meta.env用于环境变量，通常以VITE_为前缀。对于旧版项目，可能需要一个自定义插件来处理现有process.env 。

服务器代理

对于在开发过程中替代后端服务的请求：

服务器： {
  代理人： {
    “/graphQl”：“ http：// localhost：3001”
  }
}

建筑图书馆

对于构建库，请在vite.config.ts中配置build选项：（示例为简洁，但类似于原始示例）

结论

Vite在Web应用程序开发方面提供了显着改善，提供了速度和易用性。它的功能和与汇总插件的兼容性使现有项目相对简单。

以上是将VITE添加到您现有的Web应用程序中的详细内容。更多信息请关注PHP中文网其他相关文章！