Vite React 项目中使用 JavaScript 先前的 React 项目是基于 CRA + JavaScript的，直接在 js 中书写 jsx 语法。最近将一个 这样的项目迁移到 Vite 2，结果测试时发现，使用 Vite 启动时就会抛出一堆问题，看过 Vite 官方文档的故障排除也没有提及此类问题。

AntV G6 项目如何兼容 IE 阿里的 AntV G6 是很强大很好用，但要兼容 IE 会遇到各种 坑。虽然官网给出了 解决方案 ，但因为原因千奇百怪，即使完全照官方的方案操作一遍，仍然有问题。本文如果能帮到同学少踩坑，那就不枉我花二个小时来总结了。本文仅以 Vue Vue CLI 工程为例讲解。vue-g6-editor曾经用官方推荐的 基于 G6 和 Vue 的可视化编辑器 做了一个场景编辑器，测试不能兼容 IE，报如下错误：点击错误行进去排查，发现 @antv/g/src/core/event-emitter.js 中有个方法里面有 const 关键字，如下图：Vue CLI v3 以上版本使用 core-js 基本上解决了大部分的 IE 兼容问题，但不少第三方库（node_modules 中）将 es6 语句转换成 es5 时做得不彻底，无形中会引入新的 IE 兼容问题。一般的 webpack Vue CLI 工程为了编译得快，默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果想要通过 Babel 显式转译一个依赖，可以在 transpileDependencies 选项中列出来，然后在使用工程中再转换。明白了这个道理就比较好解决问题了。transpileDependencies: ["@antv/g", "@antv/g6"]注意：3.2.10 以下版本的 @antv/g 跑这个示例都必须设置 @antv/g 依赖项。3.2.10~3.8.5 版本的可以不用额外加依赖项，但要相应修改示例代码中的一些依赖包路径才能跑起来X-Flowchart-Vue 该项目 的示例有些 Viso 的味道，画流程图爽歪歪，文档很 Nice，不足的是包太大了。测试了一下该示例不能兼容 IE。因为该工程根本没有设置 transpileDependencies，如下设置就可以了：transpileDependencies: ["@oxoyo/xfc"]注意：示例工程依赖，@oxoyo/xfc，后者依赖 @antv/g6，通常在 transpileDependencies 添加的是直接依赖。普通工程普通的 Vue CLI + @antv/g6 工程有没有兼容 IE 问题呢？经我测试，@antv/g6 4.0.4 以上版本不能兼容 IE，会报如下错误：My God，新版竟然用了 Proxy 。一步步排查发现在 @antv/layout/es/layout/layout.js// FIXME // FOR G6 export const Layouts = new Proxy({}, { get: (target, propKey) => { return getLayoutByName(propKey); }, set: (target, propKey, value) => { registerLayout(propKey, value); return true; } });阿里的前端同学也不容易，对不对?。没办法，既然用了 Proxy，就等于放弃 IE 了。所以如果一定要支持 IE, @antv/g6 的版本最好是 3.1.0~4.0.4。由于 3.1.0 以下版本改动太大，不推荐使用。总结结合工作实践，总结一下解决兼容 IE 的办法：低版本 Vue CLI 工程，检查有没有配置 babel-plugin-transform-runtime/babel-polyfill；高版本 Vue CLI 工程，检查有没有配置 core-js；高版本 Vue CLI 工程，想一想要不要配置 transpileDependencies，本文中的 @antv/g6，还有经常用到的vue-echarts、vue-baidu-map，都需要设置相应 transpileDependencies；最后考虑要不要降级依赖的第三方库。高版本的 @antv/g6 和 swiper都不能兼容 IE，降级后可以兼容。有同学可能会说，微软都放弃 IE 转向 Edge 了吗？花那么多精力搞 IE 兼容干什么呢？说实话，我也盼望 IE 早点退出历史舞台。但事实上，客户说一定要支持 IE，老板产品说一定要支持 IE，有什么办法呢？

您可能不知道的 Alan 当前有很多语音助手：iOS 有 Siri，Windows 有小娜，Android 有 Google Assistant，亚马逊的 Alexa，国内安卓有灵犀。各大厂还推出了小度、小雅、小爱、天猫精灵等智能音箱产品，深受大家喜爱。这些语音助手或语音 AI 产品有一个基本上都是基于移动设备的。除了少有几个在线搜索、在线翻译 App 使用语音助手，很少看到使用了语音功能的 Web App。主要还是因为移动场景下语音设备一般是标配，语音功能能解放双手，使用起来很方便。而电脑没有声卡没有麦克风一样跑得很溜，加上 Web 语音技术不是原生的，自行研发成本很高。随着 Serverless（无服务器环境）和云计算云服务大行其道，我相信语音 Web App 会流行起来的。下面就会为大家推荐一个高级语音 AI 平台 Alan。如果您已经迫不及待，先 体验一下 最终效果吧，英语单词要读准哟 ?。一、Alan 概述Alan 提供了一个完整的无服务器环境来构建强大且可靠的应用内语音助手和聊天机器人。无需创建口语模型、训练语音识别软件、部署和托管语音组件 —— Alan AI 后端完成了大部分工作。您的应用程序的语音体验可以由单个开发人员构建和开发，而不是由机器学习和 DevOps 专家团队构建和开发，因此您无需额外开销即可向应用添加语音界面。使用 Alan，您可以超越触摸和键入界面的功能，并且语音可以在您的应用程序中启用任何复杂的工作流程或功能。Alan 语音脚本是用 JavaScript 编写的，这使得它们具有高度的可定制性和灵活性。使用 Alan 创建的语音界面构建一次即可部署在任何地方——您无需为特定平台重建它们。二、Alan 起步想为您的应用创建语音助手吗？请按照以下步骤开始使用 Alan。1. 注册 Alan Studio注册 Alan Studio 或 登录（如果您已经注册）。2. 创建语音脚本进入 Alan Studio，可以看到已有的项目统计、Create Voice Assistant 按钮、可用的免费交互次数。如下图：免费用户可以默认交互 50 次，如果绑定 github 并给 Alan 点赞，可以送交互（最多 9 次）。免费次数用完后，用户需要更改成付费方式并在线充值才能继续使用 Alan 语音云服务。2.1 新建工程单击Create Voice Assistant会显示如下选择对话框：此处选择一个空白模板新建工程，也可以复制一个 语音脚本示例 模板来编辑工程。Alan Studio 在线编辑器的界面如下：2.2 编写语音脚本要让用户与您的语音助手交互，您需要添加用户可以提供的语音脚本命令。语音脚本描述了与用户对话的结构，或预期的对话场景。在 Alan Studio 中，在脚本编辑区输入以下代码：// Use this sample to create your own voice commands intent('(going| ) right', p => { p.play('Right'); p.play({command:'go-right'}); }); intent('(going| ) left', p => { p.play('Left'); p.play({command:'go-left'}); }); intent('(going| ) up', p => { p.play('Up'); p.play({command:'go-up'}); }); intent('(going| )down', p => { p.play('Down'); p.play({command:'go-down'}); });也可以通过点击 Add script 按钮来新增多个语音脚本。目前 Alan 提供的语音脚本示例有：Bitcoin（比特币语音助手）、Calculator（计算器机器人）、News（新闻头条播报）、CRM（客户关系管理语音助手）、Small Talk（简单聊天机器人）、Weather（天气播报机器人）、Jeopardy（极限游戏机器人）、Translation（翻译机器人）。2.3 测试语音脚本在 Alan Studio 中，在 Edit 选项卡下方，键入聊天或按麦克风按钮说话，可以测试语音脚本。免费用户有功能限制：不能使用 Alan Studio 的测试视图通过 Alan Studio 底部的日志面板可以查看：系统日志：Alan Studio 系统消息语法日志：语音脚本错误信息短语日志：对话中对话消息的信息3. 集成到应用程序中在 Alan Studio 工具栏中点击 Integrations，首先要选择整合一样，开发阶段一般选择 Development。最重要需要 Copy SDK Key，如下图：免费用户有功能限制：不能选择整合环境。这个在客户端调用云服务时会用到。我们还可以在该面板中配置 Alan 按钮。免费用户有功能限制：不能添加编辑个性化配置选项。能不能支持中文语音有待验证。根据配置 Alan Studio 会生成相应的嵌入代码，如下图：新建一个 html 文件，将脚本标记添加到页面：<script src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>给 Alan 按钮添加一个容器：<div class="alan-btn"></div>在 script 标签中复制嵌入代码示例并做如下相应修改：var btn = alanBtn({ right: 24, top: 24, size: 48, key: "8fc5f867070d9b45dbfb01d46106baf62e956eca572e1d8b807a3e2338fdd0dc/stage", onCommand: (commandData) => { console.log(commandData); let style = document.getElementById("circle").style; const command = commandData.command; if (command === "go-right") { style.transform += "translateX(50px)"; } ... }, rootEl: document.getElementById("alan-btn") }); btn.activate(); btn.playText("you are welcome"); btn.playCommand({ command: "go-down" });点击此处查看 完整实例代码。当用户说：going left 或 left，Alanw 会向用户播放文本 Left 并将小球向左移动 50px，其它方向亦然。如果免费语音次数已经使用完，会听到一个语音提示让用户充值。在本实例中，Alan 按钮实例初始化完成后，我们使用 activate() 方法以编程方式打开激活 Alan 按钮，调用 playText() 方法播放 you are welcome，并使用 playCommand() 方法执行将小球向右移动 50px;三、服务器端 API1. 意图您可以使用 intent() 函数在脚本中定义语音命令。该功能可用于完成用户要求的任务或回答用户的问题。在 intent() 函数中，您必须指定一种或多种模式 — 调用命令的用户话语，以及调用命令时必须触发的一种或多种响应操作。命令和响应部分支持正则表达式、通配符。详细语法详见 模式。编写命令时，您可以将预定义和用户定义的插槽添加到意图模式。插槽是用户话语中的 变量，允许 Alan 识别和检索有用的信息。2. 响应在 Alan 中，您可以通过以下功能触发语音命令的响应操作：play()reply()2.1 Playplay() 是用于响应操作的预定义函数。您可以使用它来响应用户或向客户端应用程序发送命令。响应用户要向用户播放响应，您需要在 play() 函数中定义一个模式。Alan 将使用这句话作为回应。在上面示例中，当用户说：going right 或 right 会调用该命令。 作为响应操作，Alan 向用户播放文本 Right。向 App 发送命令play() 函数可用于向与 Alan 集成的客户端应用程序发送命令。此类命令可让您在应用程序端执行特定活动，例如，导航到应用程序中的另一个页面、突出显示屏幕上的 UI 元素等。通过这种方式，您可以同步语音和视觉效果，并为您的应用创建多模式界面。要发送命令，请将 JSON 传递给 play() 函数。在上面示例中，当用户说：going right 或 right 会调用该命令。 作为响应操作，Alan 向客户端 App 发送 go-right 命令。当然，更灵活的方式发送命令的同时要在应用程序端处理命令，您必须为从 Alan 的语音脚本接收到的命令定义处理程序。有关详细信息，请参阅 onCommand处理程序。2.2 答复reply() 是一个预定义的函数，如果你只需要给用户一个响应，不需要做任何复杂的动作，就可以使用它。intent('Say $(W hello|goodbye)', reply('$(W)'));其实就是 play(语音文本)，在 reply() 函数中，您可以像在 play() 函数中一样使用模式和插槽。3. 意图匹配您的项目可以有许多语音命令。当用户发出命令时，Alan 会将命令与脚本中最合适的意图进行匹配。为此，Alan 分别评估每个意图，并为意图分配不同的权重或匹配分数。匹配分值范围从 1（最准确的匹配）到 0（不匹配）。得分最高的命令被选为最佳匹配。在下面的示例中，如果用户询问：天气如何？第一个意图将被选为最佳匹配。 第二个意图将不会被匹配，因为它包含的单词比用户的话语多。 反之亦然，如果用户问：今天的天气如何？第二个意图将获得更高的分数，因为它是最准确的匹配。intent('What is the weather?', p => { p.play('The weather is a word'); }); intent('What is the weather today?', p => { p.play('The weather today is great!') });详细语法 服务端 API。四、Alan 客户端 SDK1. 支持平台使用 Alan 客户端 SDK，您可以将 Alan 与下列构建的应用集成在一起：JavaScriptReactAngularVueEmberElectronIoniciOSAndroidApache CordovaFlutterReact NativeMicrosoft PowerApps2. 主要参数下面将以 JavaScript 为例进行介绍。Alan 按钮最主要的参数有：key：Alan Studio 项目的密钥。rootEl：添加 Alan 按钮的元素。如果没有提供 rootEl，则将 Alan 按钮添加到 body 中。onCommand：用于处理来自 Alan 语音脚本的命令的回调。在此回调中，您可以设置 —— 有关应用程序对语音脚本接收到的命令做出反应的逻辑。onButtonState：接收 Alan 按钮连接状态的回调。目前 Alan Web SDK 只支持现代浏览器，不支持 IE 浏览器。五、展望语音 AI 会成为未来最主流的交互方式。根据贝恩公司此前的一份调研数据显示，未来人机交互方式中，语音交互将会占到 30%左右。语音助手移动 App 以其先天优势仍然占据主导地位，而语音助手将作为 Web App 增强功能不断创新，让我们的生活更美好。参考：https://studio.alan.apphttps://alan.app/docs/usage/getting-startedhttps://alan.app/docs/client-api/web/vanillahttps://alan.app/docs/usage/video/studio#alan-studio-videos

怎样不输出 CRA 工程的 sourceMap 文件 使用 Create React App 创建的单页应用生产环境下默认会使用 sourceMap 文件，这些文件一般很大，最好不要将它们部署到服务器上。当然，我们可以手动删除已经输出的文件，高级一点还可以使用一个 node 程序来批量删除。但能不能简单一点，通过 webpack 不输出 sourceMap 文件呢？Create React App 这个工具链是官方推荐的的最佳方式，不过默认下它隐藏了 Webpack，无法直接修改配置，因此我们想自定义一些配置比较麻烦。目前能自定义的方式主要有：一、使用 eject在 package.json 中很容易找到该命令，运行该命令会还原 react-scripts 隐藏的 Webpack 配置，通过 Webpack 配置文件我们就可以随心所欲地自定义了。注意，该过程是不可以逆的，会生成很多工程文件。小心使用为妙！二、使用 config-overrides.js这是一种通过覆盖 webpack 原有默认配置的方式一定来自定义的方式。1. 安装依赖npm i -D react-app-rewired customize-cra2. 修改 package.json 脚本"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-scripts test --env=jsdom" ... }3. 设置 config-overrides.js比如我们要在生产环境不输出 sourceMap 文件，可以在项目的根目录下新建 config-overrides.js，然后这样定义：const { override } = require('customize-cra'); module.exports = override( (() => (config, env) => { if (env === 'production') { config.output.publicPath = ''; config.devtool = false; } return config; })() )运行 npm run build 后会发现，确实不会输出 js 的 sourceMap 文件，但 CSS 的 sourceMap 文件依然照输不误。尝试使用 customize-cra 插件的其它方法也无功而返。直到我仔细阅读了 Create React App 文档，最终找到了办法。三、使用 .env项目的根目录下新建 .env.production，该文件只对生产环境有效，然后这样定义：GENERATE_SOURCEMAP = false运行 npm run build 后，JavaScript、CSS 的 sourceMap 文件都不会输出。一切都安静了，真好！参考https://create-react-app.dev/docs/advanced-configuration

第 13 章 MobX 和 Hook 在本章中，我们将学习如何将 MobX 与 Hook 结合使用。我们将首先学习如何使用 MobX 处理状态，然后继续使用带有 Hook 的 MobX。此外，我们还将学习如何将现有的 MobX 应用程序迁移到 Hook。最后，我们将讨论使用 MobX 的利弊。在本章结束时，您将完全了解如何使用 Hook 编写 MobX 应用程序。