create-react-app项目中homepage与PUBLIC_URL的羁绊

3,345 阅读1分钟

前言

事情的起因是这样的,在一次用create-react-app构建的项目中,我在项目中同时设置了homepagePUBLIC_URL的,导致了一系列的异常。

场景再现

当时项目需要配置到一个子目录/visual-drag-demo下,所以,我对是homepage做了如下操作,再package.json配置如下:

"homepage": "/visual-drag-demo",

打包构建运行后,打开控制台查看路径,发现编译后访问目录是不对的。

<script src="/static/js/main.e8bd816f.chunk.js"></script>

经过排查,发现在package.json中,我又在之前做了如下配置:

"start": "PUBLIC_URL=/ react-app-rewired start",

进行分析,原来是设置了PUBLIC_URL=/后,PUBLIC_URL的优先级比homepage高。导致编译路径为/。才会有如此错误。

再问一步why

当在package.json中,同时设置了homepagePUBLIC_URL为何会用如此的影响了。不信邪的我去了create-react-app中寻找到了答案。再getPublicUrlOrPath.js中,我看到了这份逻辑运行。代码如下:

/**
 * Returns a URL or a path with slash at the end
 * In production can be URL, abolute path, relative path
 * In development always will be an absolute path
 * In development can use `path` module functions for operations
 *
 * @param {boolean} isEnvDevelopment
 * @param {(string|undefined)} homepage a valid url or pathname
 * @param {(string|undefined)} envPublicUrl a valid url or pathname
 * @returns {string}
 */
function getPublicUrlOrPath(isEnvDevelopment, homepage, envPublicUrl) {
  const stubDomain = 'https://create-react-app.dev';

  if (envPublicUrl) {
    // ensure last slash exists
    envPublicUrl = envPublicUrl.endsWith('/')
      ? envPublicUrl
      : envPublicUrl + '/';

    // validate if `envPublicUrl` is a URL or path like
    // `stubDomain` is ignored if `envPublicUrl` contains a domain
    const validPublicUrl = new URL(envPublicUrl, stubDomain);

    return isEnvDevelopment
      ? envPublicUrl.startsWith('.')
        ? '/'
        : validPublicUrl.pathname
      : // Some apps do not use client-side routing with pushState.
        // For these, "homepage" can be set to "." to enable relative asset paths.
        envPublicUrl;
  }

  if (homepage) {
    // strip last slash if exists
    homepage = homepage.endsWith('/') ? homepage : homepage + '/';

    // validate if `homepage` is a URL or path like and use just pathname
    const validHomepagePathname = new URL(homepage, stubDomain).pathname;
    return isEnvDevelopment
      ? homepage.startsWith('.')
        ? '/'
        : validHomepagePathname
      : // Some apps do not use client-side routing with pushState.
      // For these, "homepage" can be set to "." to enable relative asset paths.
      homepage.startsWith('.')
      ? homepage
      : validHomepagePathname;
  }

  return '/';
}

在以上代码中,你将会找到问题的所有答案。