alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
https://ice.work
MIT License
17.83k stars 2.09k forks source link

增加 import.meta.env.PUBLIC_PATH 变量 #5787

Open luhc228 opened 1 year ago

luhc228 commented 1 year ago

背景

假设现在在 public 目录下有一些静态资源,要在 Document.tsx 中引入,比如:

function Document() {
  return (
    <html lang="en">
      <head>
        <script src="/abc.js"></script>
      </head>
    </html>
  );
}

在本地环境下是可以正常访问到 localhost:3000/abc.js 静态资源的。但是如果部署到跨端应用后,跨端应用部署后访问 public 下的静态资源是通过 https://example.com/abc.js ,而 abc.js 仅仅被发到 cdn 上,导致访问失败。

ice.js 3 需要提供跟 rax-app 类似的能力,通过变量的形式修改。

使用方式

function Document() {
  return (
    <html lang="en">
      <head>
        <script src={import.meta.env.PUBLIC_PATH + "abc.js"}></script>
      </head>
    </html>
  );
}

在构建时统一替换 import.meta.env.PUBLIC_PATH 的值为 publicPath

wssgcg1213 commented 1 year ago

import.meta.publicPath 会更好一些, env 这里应该是这个变量的输入, 消费的地方已经不是环境变量了, 而是 context.publicPath