五月婷婷五月在线,久久久久福利,国产精品欧美亚洲区

Web開發者福音！創建第一個Vite支持的Web應用（1/2）

翻譯|行業資訊|編輯：龔雪|2022-08-12 11:02:55.700|閱讀 215 次

概述：本文將著重為解決前端 Web 開發人員的需求，創建第一個Vite支持的Web應用，歡迎下載相關工具體驗！

在這篇文章中，我們將解決前端 Web 開發人員的需求，并向您展示如何使用 Vite 庫來顯著提高 Javascript 客戶端應用程序的啟動/更新速度。

Vite 是一個基于開發服務器的構建工具，它在啟動應用程序之前組裝 JavaScript 代碼，同時Vite還有助于在進行更改時減少加載速度，并允許您幾乎可以立即查看結果。

Vite將代碼創建為ES模塊——現代瀏覽器可以用來加載JavaScript的模塊，在依賴較大的情況下，Vite 會預先捆綁這些模塊，以減少瀏覽器對 Web 服務器的請求數量。在以下部分中，我們將向您展示如何將Vite添加到由DevExtreme提供支持的React Reporting應用程序中。

DevExtreme v22.1正式版下載

創建示例DevExtreme應用程序

首先，使用從模板生成一個新應用程序：

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'

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

DevExpress Reporting | 下載試用

DevExpress Reporting是.NET Framework下功能完善的報表平臺，它附帶了易于使用的Visual Studio報表設計器和豐富的報表控件集，包括數據透視表、圖表，因此您可以構建無與倫比、信息清晰的報表。

DevExpress技術交流群6：600715373 歡迎一起進群討論