Web开发者福音！创建第一个Vite支持的Web应用（1/2）

界面开发小八哥

已于 2022-08-19 16:24:30 修改

阅读量173

点赞数

文章标签： javascript 开发语言 web vite

于 2022-08-15 09:59:40 首次发布

本文链接：https://blog.csdn.net/AABBbaby/article/details/126341166

版权

在这篇文章中，我们将解决前端 Web 开发人员的需求，并向您展示如何使用 Vite 库来显着提高 Javascript 客户端应用程序的启动/更新速度。

Vite 是一个基于开发服务器的构建工具，它在启动应用程序之前组装 JavaScript 代码，同时Vite还有助于在进行更改时减少加载速度，并允许您几乎可以立即查看结果。

Vite将代码创建为ES模块——现代浏览器可以用来加载JavaScript的模块，在依赖较大的情况下，Vite 会预先捆绑这些模块，以减少浏览器对 Web 服务器的请求数量。在以下部分中，我们将向您展示如何将Vite添加到由DevExtreme提供支持的React Reporting应用程序中。

DevExtreme v22.1下载

创建示例DevExtreme应用程序

首先，使用DevExtreme CLI 从模板生成一个新应用程序：

npx -p devextreme-cli devextreme new react-app devextreme-react-sample --template="typescript"
cd devextreme-react-sample

为DevExpress文档查看器添加一个视图：

npx devextreme add view document-viewer

为DevExpress Report Designer添加一个视图：

npx devextreme add view report-designer

配置应用程序来使用Vite和DevExpress Reports

首先，修改 package.json 文件：

1. 添加dependencies：

"@devexpress/analytics-core": "^22.1.2",
"devexpress-reporting": "^22.1.2",
"jquery-ui-dist": "1.13.1"

2. 添加devDependencies：

"@vitejs/plugin-react": "^1.3.0",
"vite": "^2.9.9"

3. 将脚本部分替换为以下内容：

"scripts": {
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"build-themes": "devextreme build",
"postinstall": "npm run build-themes"
},

然后，修改 index.html 文件：

1. 将 index.html 文件从 public 文件夹移动到项目根文件夹。

2. 从 index.html 文件中删除 %PUBLIC_URL% 字符串。

3. 向 index.html 文件添加入口点：

<body class="dx-viewport">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/jquery.js"></script>
<script type="module" src="/src/jquery-ui.js"></script>
<script type="module" src="/src/index.tsx"></script>
</body>

4. 添加具有以下内容的文件 src/jquery-ui.js：

import "jquery-ui-dist/jquery-ui";

5. 添加具有以下内容的文件 src/jquery.js：

import jQuery from "jquery";
Object.assign(window, { $: jQuery, jQuery })

6. 在根文件夹中添加一个 vite.config.js 文件，内容如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
treeshake: false
}
}
})