vite搭建项目,vite 前端
本文主要介绍vite建设项目，支持微前端。通过示例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
基本配置支持微前端构造。其他注释1。对旧浏览器的支持。关于TypeScript 3的注释。对接CDN4。构造错误4.1找不到包4.2请求超时4.3导入模块错误。得益于esbuild的超高性能，vite从诞生之日起就备受关注，一直保持着活跃的开发迭代。到目前为止，vite已经迭代到2.7.10版本，各方面已经基本具备了生产使用的条件。这段时间我在项目中尝试使用vite进行包构建，本文就是这个构建过程的记录。
基础配置
首先，使用vite的官方脚手架生成项目。
纱线创建vite vite-演示-模板反应-ts
上面的命令使用react-ts模板创建一个名为vite-demo的项目。因为我的团队使用react和typescript进行日常开发，所以我选择react-ts作为模板。vite官方支持的模板有很多，可以在create-vite中查看。
项目初始化后，目录结构如下：
____index.html
____.被增加
____package.json
____tsconfig.json
____vite.config.ts
____src
____App.tsx
____main.tsx
____App.css
____index.css
____vite-env.d.ts
____logo.svg
____favicon.svg
其中，vite.config.ts包含以下内容：
从“vite”导入{ defineConfig }
从 @vitejs/plugin-react 导入react
//https://vitejs.dev/config/
导出默认定义配置({
插件：[react()]
})
可以看到官方的vite做了一个比较完整的打包，相比之前的版本，开发体验提升了不少。
按照说明，安装完依赖项，启动应用后，速度真的很快。现在让我们做一些基本的转换。
我平时写风格用的比较少，vite在支持方面做的很好。安装完依赖项后，我只需要在代码中直接引用xxx.less即可。对于一个成熟的开发人员来说，风格应该被引入范围，通常使用css模块。
安装较少的预处理器，
无纱线添加装置
然后修改vite.config.ts文件并添加css模块配置：
导出默认定义配置({
.
css: {
模块：{
Localconvention: camel case only ，//我们使用驼峰形式。
},
},
.
})
添加配置后，只需将原来的xxx.less改为xxx.module.less，与create-react-app相同。
这里推荐一个vscode插件clinyong.vscode-css-modules，可以实现编码时样式类名的智能提示。同时，点击样式类名可以跳转到定义样式的地方，非常好用。如果样式以破折号的形式命名，比如。xxx-container，您需要如下配置这个vscode插件
{
cssModules.camelCase: true
}
这样就可以实现写风格时用中间破折号形式，代码中用驼峰形式。
当我开发一个中后台项目时，我使用了antd和lodash。众所周知，这两个是按需加载的大用户。以前我们用babel-plugin-import来应对，vite生态里也有很多类似的方案。我选择了插件vite-plugin-imp并修改了vite.config.ts如下：
从“vite-plugin-imp”导入vitePluginImp
导出默认定义配置({
.
插件：[
.
vitePluginImp({
列表：[
{
libName: lodash ，
libDirectory:“”，
camel2DashComponentName: false，
},
{
libName: antd ，
样式(名称){
//少用
return ` antd/es/$ { name }/style/index . js `；
},
},
],
}),
],
css: {
.
预处理程序选项：{
减：{
javascriptEnabled: true，
},
},
},
});
Antd已经默认支持摇树，上面的配置最后只会处理样式的按需加载。Lodash不支持摇树。我们也可以使用ESM版本lodash-es，这样就可以不用vite-plugin-imp了。配置如下：
导出默认定义配置({
解决：{
别名：[{
找到：/^lodash$/，
替换：“lodash-es”，
}],
},
});
通常我们在开发前端项目的时候，需要一些代理来调用后端API接口。vite配置如下：
导出默认定义配置({
.
服务器：{
代理服务器：{
/api_path/: {
目标： http://xxx.server.domain.com/，
changeOrigin:真的，
},
},
},
});
代理的底层是基于http-proxy的，这里不做过多解释。
现在你可以愉快地开发代码了。
支持微前端构建
因为我们的中后台应用是由微前端(钱坤)管理的，所以上述配置打包后无法被钱坤认可。这里可以看出主要原因，需要做一些额外的处理。
我们知道，要用webpack构建微前端，需要添加以下三个配置项：
{
输出：{
库目标：“umd”，
库：` $ {应用程序名称}-[名称]`，
JSON function:` webpackjson p _ $ { APP _ NAME } `，
}
}
在vite中，通过将build.rollupOptions.format设置为umd可以直接设置UMD规范，但实际的构建结果却无法被钱坤识别，这可能与vite使用html entry有关。
另一种方式，我们将当前应用程序构建为库，输出为UMD规范，然后手动编写一个html文件来加载输出JS。
按如下方式修改配置：
导出默认定义配置({
.
构建：{
lib: {
姓名，
entry: path.resolve(__dirname， src/index.tsx )，
格式：[umd]，
},
},
.
})
配置完成后，执行纱线构建，提示以下错误：
代码拆分生成不支持UMD和生命输出格式。
因为我们的应用程序中有路由，所以我们使用按需加载。让我们打开rollup的inlineDynamicImports配置：
导出默认定义配置({
.
构建：{
汇总选项：{
输出：{
inlineDynamicImports: true，
},
},
},
.
})
这样，构造完成后，dist目录下就有两个文件style.css和xxx.umd.js。
现在我们将生成index.html。
因为vite在开发状态下直接使用es模块，没有打包，所以开发状态下生成的index.html和生产中生成的index.html是不一样的。
我们修改项目根目录下的index.html如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8 /
link rel= icon type= image/SVG XML href=/src/favicon . SVG rel= external no follow /
meta name= viewport content= width=device-width，initial-scale=1.0 /
title邀请应用程序/标题
！-样式占位符-
/头
身体
div id=root/div
！-脚本占位符-
/body
/html
注意这两行注释，我们将在开发状态和生产构建中区别对待它们。
vite插件API中有一个transformindexhtml，可以自定义开发状态下的html内容。因此，我们的开发状态的配置如下：
//https://vitejs.dev/config/
导出默认定义配置({
.
插件：[
.
{
名称：“开发html”，
申请：服务，
transformIndexHtml(indexHtml:string){
返回索引Html。替换(！-样式占位符-，)。替换(！-脚本占位符-，脚本类型=模块 src=/src/index . tsx /script )；
},
},
.
],
});
制作需要使用插件@rollup/plugin-html来定制html内容。
从“@rollup/plugin-html”导入html；
从“fs”导入fs；
const entryHtml=fs.readFileSync(。/index.html ，{编码： utf-8 })；
导出默认定义配置({
.
插件：[
.
{
名称：“构建html”，
应用：“构建”，
.html({
模板：()={
返回entryHtml。替换(
！-样式占位符-，
link rel= style sheet type= text/CSS href= style . CSS rel= external no follow /，
)。替换(
！-脚本占位符-，
` script type= text/JavaScript src= $ { name } . UMD . js /script `，
);
},
}),
},
.
],
});
通过上面的配置和重新构建，钱坤可以加载这个子应用程序。
其他说明
1. 老旧浏览器的支持
因为我这次的项目是中后端项目，因为没有老浏览器的强力支持，所以没有在项目中处理。其实官方vite也给出了解决方案，就是plugin @vitejs/plugin-legacy。
原理也很简单，就是用script nomodule在不支持ES模块的浏览器中执行相关脚本，用SystemJS加载模块。
2. 关于 TypeScript 的说明
脚手架初始化后，可以用TypeScript开发。这里需要打开编译器选项isolatedModules:true，因为vite使用esbuild处理ts文件，只将ts转换为js，不进行类型检查(依赖编辑器处理类型检查，比如vscode)。所以在遇到一些纯类型的导入导出时会出错，应该开启isolatedModules:true来避免这个问题。如果由于某种原因无法打开这个选项，可以使用roll up-plugin-friendly-type-imports包。这个包的自述文件也解释了为什么会有这样的问题。
3. 对接 CDN
基于以上配置的结果，浏览器加载资源时，总是使用根路径(/)来加载。如果使用CDN，就会有资源负载404的问题。
我们可以配置base来设置基路径，类似于webpack的PUBLIC_PATH。
导出默认定义配置({
基：“/some/public/path”，
})
4. 构建出错
4.1 找不到包
错误消息是：
[插件：vite:dep-scan]无法解析包“xxx”的条目
通常根据包的不同，package.json中main、module等字段配置不正确，导致vite找不到包的入口。
您可以设置一个别名来将其映射到正确的文件。
导出默认定义配置({
解决：{
别名：[{
找到：/^SOME_PACKAGE_NAME$/，
替换： SOME _ PACKAGE _ NAME/dist/XXX . es . js ，
}],
},
});
4.2 请求超时
错误消息是：
net:ERR_ABORTED 408(请求超时)
启动开发服务器后，浏览器遇到请求超时错误。因为vite检测到对依赖包的请求，而依赖还没有被vite处理，所以会触发预构建，导致请求超时和页面过载。
我们可以刷新几次，等待vite完成预构建，也可以在optimizeDeps.include中添加依赖关系，提前处理。
4.3 导入模块出错
错误消息是：
内部服务器错误：无法解析导入。/chunk-7L3SPMWF.js 来自 node_modules/。vite/antd.js？v=7bec0e27 。文件存在吗？
可能是因为现在还不支持一些依赖包输出的格式，vite。你可以看看这一期。
这个错误只存在于运行处理开发服务器的过程中，页面正常显示后不会出现。忽略这个错误后，目前没有任何影响。
小结
总的来说，vite已经基本具备了生产和使用的条件。如果是常规的应用开发，vite的配置非常简单，可以说是开箱即用。如果需要添加额外的配置，也非常方便。
目前很大的问题是周边生态还不是特别成熟，很多成熟的包对vite(ES模块)的支持比较弱。同时，如果团队中基础设施氛围浓厚，自研工具包也要考虑这方面。
关于vite构建项目和支持微前端的这篇文章到此为止。关于vite建筑项目的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。