欧美成妇人吹潮在线播放,日韩一级在线视频,日韩乱伦一区二区

Web開發(fā)者福音！創(chuàng)建第一個(gè)Vite支持的Web應(yīng)用（1/2）

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

概述：本文將著重為解決前端 Web 開發(fā)人員的需求，創(chuàng)建第一個(gè)Vite支持的Web應(yīng)用，歡迎下載相關(guān)工具體驗(yàn)！

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

Vite 是一個(gè)基于開發(fā)服務(wù)器的構(gòu)建工具，它在啟動(dòng)應(yīng)用程序之前組裝 JavaScript 代碼，同時(shí)Vite還有助于在進(jìn)行更改時(shí)減少加載速度，并允許您幾乎可以立即查看結(jié)果。

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

DevExtreme v22.1正式版下載

創(chuàng)建示例DevExtreme應(yīng)用程序

首先，使用從模板生成一個(gè)新應(yīng)用程序：

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

為DevExpress文檔查看器添加一個(gè)視圖：

npx devextreme add view document-viewer

為DevExpress Report Designer添加一個(gè)視圖：

npx devextreme add view report-designer

配置應(yīng)用程序來使用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. 將腳本部分替換為以下內(nèi)容：

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

然后，修改 index.html 文件：

1. 將 index.html 文件從 public 文件夾移動(dòng)到項(xiàng)目根文件夾。

2. 從 index.html 文件中刪除 %PUBLIC_URL% 字符串。

3. 向 index.html 文件添加入口點(diǎn)：

<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. 添加具有以下內(nèi)容的文件 src/jquery-ui.js：

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

5. 添加具有以下內(nèi)容的文件 src/jquery.js：

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

6. 在根文件夾中添加一個(gè) vite.config.js 文件，內(nèi)容如下：

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下功能完善的報(bào)表平臺(tái)，它附帶了易于使用的Visual Studio報(bào)表設(shè)計(jì)器和豐富的報(bào)表控件集，包括數(shù)據(jù)透視表、圖表，因此您可以構(gòu)建無與倫比、信息清晰的報(bào)表。

DevExpress技術(shù)交流群6：600715373 歡迎一起進(jìn)群討論