dart:ui（Web）的对齐，工程 化和性能相关的事项做的还比较少，例如： 前端 < 17 ● Flutter Web 构建产物较简陋，只是简单的输出 main.dart.js（1.1M，未 Gzip） 和 图片等静态资源，缺少 JS 拆包、文件 Hash、资源上传 CDN 等优 化工作，极大影响了页面的加载性能。 ● 由于 Flutter Web 自身实现了一套页面滚动机制，页面滚动过程中，会频繁计 ndation.dart’; if (kIsWeb) { print(‘Web 端’) } else { print(‘其他端’); } 文件级别分平台 针对文件级别分平台，我们利用条件导入导出，其中条件导出具体用法如下： // tool.dart export ‘src/tool_native.dart’ // 兜底导出，即没有命中条件时导出的文件 if (dart.library Web 端文件。 // 引入 tool.dart import ‘package:tool/tool.dart’; void main() { print(‘import tool’); } 条件导入和条件导出类似，仅需将 export 改为 import 即可。在业务开发中这也是一 种非常实用的分平台编程方法。 20 > 2021年美团技术年货 (2) Plugin Package Plugin

createWindow(); 49. } 50. }); 51. 52. // 在这文件，你可以续写应用剩下主进程代码。 53. // 也可以拆分成几个文件，然后用 require 导入。 最后，你想展示的 index.html ： 1. 2. 3. 4. desktop 当前用户的桌面文件夹 documents 用户文档目录的路径 downloads 用户下载目录的路径. music 用户音乐目录的路径. pictures 用户图片目录的路径. videos 用户视频目录的路径. name String path String 重写某个 name 的路径为 path ， path 可以是一个文件夹或者一个文件，这个和 Boolean -允许一个使用 https的界面来渲染由 http URLs 提 交的html,css,javascript. 默认为 false . images Boolean - 开启图片使用支持. 默认 true . textAreasAreResizable Boolean - textArea 可以编辑. 默认为 true . webgl Boolean - 开启

API允许JavaScript读取文件内容，获得更多的文件信息。 HTML5的File API提供了 File 和 FileReader 两个主要对象，可以获得文件信息并读取文件。 下面的例子演示了如何读取用户选取的图片文件，并在一个 <div> 中预览图像： 1. var 2. fileInput = document.getElementById('test-image-file'), 书栈(BookStack.CN) 构建 5. // 监听change事件: 6. fileInput.addEventListener('change', function () { 7. // 清除背景图片: 8. preview.style.backgroundImage = ''; 9. // 检查文件是否选择: 10. if (!fileInput.value) { 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') { 21. alert('不是有效的图片文件!'); 22. return; 23. } 24. // 读取文件: 25. var reader = new FileReader(); 26

sayHello(name: string) { 2. return `Hello from ${name}`; 3. } 更改 src/main.ts 代码，从 greet.ts 导入 sayHello ： 1. import { sayHello } from './greet'; 2. 3. console.log(sayHello('TypeScript')); 50 - 本文档使用 书栈网 · BookStack.CN 构建 5. } 6. }); 这个文件会告诉RequireJS从哪里导入Knockout，好比我们在 hello.ts 里做的一样。 你创建的 所有页面都应该在RequireJS之后和导入任何东西之前引入它。 为了更好地理解这个文件和如何配置 RequireJS，可以查看文档。 我们还需要一个视图来显示 HelloViewModel install --save-dev @types/react @types/react-dom 使用 @types/ 前缀表示我们额外要获取React和React-DOM的声明文件。 通常当你导入 像 "react" 这样的路径，它会查看 react 包； 然而，并不是所有的包都包含了声明文件，所以 TypeScript还会查看 @types/react 包。 你会发现我们以后将不必在意这些。

function sayHello(name: string) { return `Hello from ${name}`; } 更改 src/main.ts 代码，从 greet.ts 导入 sayHello ： import { sayHello } from "./greet"; console.log(sayHello("TypeScript")); TypeScript "knockout": "externals/knockout-3.4.0", } }); 这个文件会告诉RequireJS从哪里导入Knockout，好比我们在 hello.ts 里做的一 样。 你创建的所有页面都应该在RequireJS之后和导入任何东西之前引入它。 为了 更好地理解这个文件和如何配置RequireJS，可以查看文档。 我们还需要一个视图来显示 HelloViewModel --save react react-dom @types/react @types/react-dom 使用 @types/ 前缀表示我们额外要获取React和React-DOM的声明文件。 通常当 你导入像 "react" 这样的路径，它会查看 react 包； 然而，并不是所有的包都 包含了声明文件，所以TypeScript还会查看 @types/react 包。 你会发现我们以 后将不必在意这些。

构建 Vue.js 在设计上是可以逐步采纳的。这意味着它可以根据需求以多种方式集成到一个项目中。 将 Vue.js 添加到项目中有三种主要方式。 1. 在页面上以 CDN package 的形式导入。 2. 使用 npm 安装它。 3. 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如， 热重载、保存时的提示等等)。 最新版本： npm@next @vue/cli@next 然后在 Vue 项目运行： 1. vue upgrade --next Vite (opens new window) 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允 许快速提供代码。 npm 命令行工具 (CLI) Vite 安装 - 8 - 本文档使用 书栈网 · BookStack.CN 构建 通过在终端中运行以下命令，可以使用 Vite prod).js ： vue(.runtime).esm-browser(.prod).js ： 安装 - 9 - 本文档使用 书栈网 · BookStack.CN 构建 用于通过原生 ES 模块导入使用 (在浏览器中通过