跑开发环境报错

[liaoyinglong]

步骤：

1. git clone
2. yarn
3. yarn watch
4. yarn start

[jaywcjlove]

@liaoyinglong 组件和网站是分开的， src目录是组件，website 是文档网站 运行的时候需要先 build 一下 npm run build

1. clone
2. yarn install
3. yarn run build
4. yarn run watch
5. yarn start

[liaoyinglong]

还是不行，同样的报错

我是windows环境

debug到node_modules/react-dev-utils/WebpackDevServerUtils.js

编译入口并不是website

react-script/config/webpack.config.js里面的入口也并不是paths.appSrc 而是paths.appIndexJs

[jaywcjlove]

@liaoyinglong 我猜可能是 kkt 这个工具出了兼容问题，不知道能否帮忙测试一下

kkt 这个工具是基于 create-react-app 重构了一下，但是我在 windows 上并没有测试

@kkt/core/src/overrides/paths.ts

  if (argvs && argvs['app-src']) {
    const oldAppSrc = pathsConf.appSrc;
    pathsConf.appSrc = path.resolve(pathsConf.appPath, argvs['app-src']);
    Object.keys(pathsConf).forEach((keyname) => {
      if ((new RegExp(`^${oldAppSrc}`)).test(pathsConf[keyname])) {
        pathsConf[keyname] = pathsConf[keyname].replace(new RegExp(`^${oldAppSrc}`), pathsConf.appSrc);
      }
    });
  }

原理很简单，就是 node.js 加载包之后，通过替换缓存内容，改变原来包里面的内容

在下面两个地方帮我打个日志，没有 windows 系统短时间没有办法解决

  if (argvs && argvs['app-src']) {
    const oldAppSrc = pathsConf.appSrc;
+    console.log('->', oldAppSrc)
    pathsConf.appSrc = path.resolve(pathsConf.appPath, argvs['app-src']);
    Object.keys(pathsConf).forEach((keyname) => {
+    console.log('->', pathsConf[keyname])
      if ((new RegExp(`^${oldAppSrc}`)).test(pathsConf[keyname])) {
        pathsConf[keyname] = pathsConf[keyname].replace(new RegExp(`^${oldAppSrc}`), pathsConf.appSrc);
      }
    });
  }

我想可能是windows 获取路径 \\ 和 macOS上的/ 发生了兼容问题，导致 oldAppSrc 并没有命中缓存中的内容。

[liaoyinglong]

log

这个是 pathsConf

[liaoyinglong]

是这里

[jaywcjlove]

@liaoyinglong 能打印一下 keyname 吗？

  if (argvs && argvs['app-src']) {
    const oldAppSrc = pathsConf.appSrc;
+    console.log('->', oldAppSrc)
    pathsConf.appSrc = path.resolve(pathsConf.appPath, argvs['app-src']);
    Object.keys(pathsConf).forEach((keyname) => {
+    console.log('->', keyname, pathsConf[keyname])
      if ((new RegExp(`^${oldAppSrc}`)).test(pathsConf[keyname])) {
        pathsConf[keyname] = pathsConf[keyname].replace(new RegExp(`^${oldAppSrc}`), pathsConf.appSrc);
      }
    });
  }

[jaywcjlove]

      if ((new RegExp(`^${oldAppSrc}`)).test(pathsConf[keyname])) {
        pathsConf[keyname] = pathsConf[keyname].replace(new RegExp(`^${oldAppSrc}`), pathsConf.appSrc);
      }

那应该是这一句的问题了。匹配路径，进行替换路径的时候，没有匹配上。

[liaoyinglong]

@liaoyinglong 能打印一下 keyname 吗？

  if (argvs && argvs['app-src']) {
    const oldAppSrc = pathsConf.appSrc;
+    console.log('->', oldAppSrc)
    pathsConf.appSrc = path.resolve(pathsConf.appPath, argvs['app-src']);
    Object.keys(pathsConf).forEach((keyname) => {
+    console.log('->', keyname, pathsConf[keyname])
      if ((new RegExp(`^${oldAppSrc}`)).test(pathsConf[keyname])) {
        pathsConf[keyname] = pathsConf[keyname].replace(new RegExp(`^${oldAppSrc}`), pathsConf.appSrc);
      }
    });
  }

keyname 可以看 这里的 的第二张图

[jaywcjlove]

@liaoyinglong

我看了好些个并没有替换掉。 这个判断 (new RegExp(^${oldAppSrc})).test(pathsConf[keyname]) 是有问题的

或者是说 下面这句有问题。

pathsConf[keyname] = pathsConf[keyname].replace(new RegExp(`^${oldAppSrc}`), pathsConf.appSrc);

[jaywcjlove]

@liaoyinglong 更新了依赖不知道是否有问题哦。

[jaywcjlove]

@liaoyinglong nice! 自动化 Windows 测试通过了。看上去没有问题的样子。

https://github.com/uiwjs/react-baidu-map/runs/1686283776?check_suite_focus=true