克隆Microsoft Bot Framework WebChat后，如何本地启动查看修改效果？

嘿，我来帮你搞定这个问题——我之前也碰到过类似的情况，WebChat仓库的默认npm start确实只是启动静态文件服务器，只会展示项目根目录的文件结构，不会直接加载聊天界面。结合你懂Angular但不熟悉React的情况，咱们一步步来实现本地启动WebChat并查看修改效果：

第一步：确保你完成了正确的构建 #

首先得确认你已经把修改后的代码构建成了可运行的文件，毕竟React项目需要编译才能生效：

• 在WebChat仓库的根目录执行npm run build（开发环境用这个就够，生产环境可以用npm run build:prod）
• 等待构建完成后，检查根目录下的dist文件夹，里面应该生成了webchat.js、webchat.css这些核心bundle文件——这就是你修改后的代码编译产物。

第二步：启动带WebChat的演示页面 #

你有两种方式可以启动能看到聊天界面的本地服务：

方式一：用官方自带的演示服务器命令 #

WebChat仓库本身提供了专门的命令来启动演示界面，直接执行：

npm run start:demo

这个命令会启动本地服务器（默认是http://localhost:3000），打开后就能看到WebChat的演示聊天窗口，你修改的代码效果会直接在这里体现。

方式二：手动创建自定义测试页面（连接你的Azure机器人） #

如果你想直接连接自己的Python Azure机器人，可以自己写一个简单的HTML测试页，步骤如下：

1. 在WebChat根目录新建一个test.html文件
2. 把下面的代码粘贴进去，记得替换成你的机器人Direct Line密钥：

<!DOCTYPE html>
<html>
<head>
    <title>我的自定义WebChat</title>
    <link href="./dist/webchat.css" rel="stylesheet">
</head>
<body>
    <div id="webchat" role="main" style="height: 500px; width: 400px;"></div>
    <script src="./dist/webchat.js"></script>
    <script>
        // 替换成你的Azure机器人Direct Line令牌
        const directLineToken = 'YOUR_DIRECT_LINE_TOKEN';

        window.WebChat.renderWebChat(
            {
                directLine: window.WebChat.createDirectLine({ token: directLineToken }),
                // 这里可以添加你修改的WebChat配置项，比如自定义主题、按钮等
            },
            document.getElementById('webchat')
        );
    </script>
</body>
</html>

3. 启动本地静态服务器：如果没装serve工具，先执行npm install -g serve，然后在根目录执行serve
4. 访问http://localhost:3000/test.html，就能看到加载了你修改后的WebChat，并且已经连接到你的Python机器人了。

第三步：让修改实时生效 #

每次修改WebChat的源代码后，你需要：

• 执行npm run build重新编译代码；或者更高效的是用npm run watch，这个命令会监听src目录的文件变化，自动重新构建，你只需要刷新页面就能看到最新效果。

给React新手的小提示 #

因为你熟悉Angular，可能对React的流程不太适应：

• WebChat的源代码都在src目录里，修改这里的文件后必须构建才能生成dist里的可运行文件
• npm run watch相当于Angular里的ng serve，会自动监听代码变化并重新编译，开发时用这个能节省很多时间

内容的提问来源于stack exchange，提问作者Vijay