Vite,发音为“ Veet”,是现代的JavaScript Bundler,以其速度和易用性而闻名。这是一个强大的工具,需要最小的配置,但提供了广泛的自定义选项。本文详细介绍了将现有项目从另一个Bundler(例如WebPack)迁移到Vite。有关新项目,请参阅官方Vite文档。即使对于遗产迁移,首先建议首先制定一个简单的Vite项目,以更好地理解其结构。
本指南反映了迁移一个长期,长期存在的Webpack项目的经验。该过程突出了Vite在过渡过程中的配置功能。
Vite固有地处理许多任务通常需要广泛的WebPack配置。这消除了许多常见的WebPack插件和设置的需求。
WebPack通常需要显式配置以加载静态资产(图像,字体等):
{ 测试: /\ .(png| jpg| gif| svg| eot| woff| woff| woff2| ttf)qun/, 使用: [ { 加载程序:“文件加载程序” } 这是给出的 }
Vite自动管理此操作。
WebPack的样式配置可能很复杂:
{ 测试: /\ s?css$/, 使用:[MinicsSextrackPlugin.Loader,“ CSS-LOADER”,“ SASS-LOADER”] },, // 之后 新的MinicsSextractPlugin({filename:“ [name] - [contenthash] .css“}),
Vite本地支持CSS和SCSS;只需安装SASS,Vite处理其余的即可。
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文档以获取兼容性信息。
对于迁移现有项目,请从引用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中文网其他相关文章!