Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

能不支持和jsdelivr&unpkg一样的npm路径格式后缀,这样方便在importmap中用 #696

Open
i18nsite opened this issue Jun 1, 2024 · 8 comments

Comments

@i18nsite
Copy link

i18nsite commented Jun 1, 2024

比如我用importmap
定义了前缀, 方便直接引用npm包

{"imports":{"npm/":"https://cdn.jsdelivr.net/npm/"}}

然后国内用户我想切换到 npmmirror ,但是我发现路径格式后缀不一样,没法直接切换

https://registry.npmmirror.com/jquery/3.6.4/files/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
https://unpkg.com/[email protected]/dist/jquery.min.js

你可以看到 https://cdn.jsdelivr.net/npmhttps://unpkg.com 路径格式一样,可以直接替换importmap,但是 npmmirror 不行

https://registry.npmmirror.com/@mdi/js/latest/files/build.js
这种带@mdi组织的格式也需要和 unpkg一致,才比较方便

@ 同样支持 @latest
https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js

Copy link

github-actions bot commented Jun 1, 2024

我们已经看到你的反馈,如果是功能缺陷,可以提供一下重现该问题的方式;如果是新功能需求,我们会尽快加入讨论。同时我们非常期待你可以加入我们的贡献者行列,让项目可以长期可持续发展。

@fengmk2
Copy link
Member

fengmk2 commented Jun 2, 2024

importmap 没有限制 url 格式的吧?

<script type="importmap">
  {
    "imports": {
      "jquery": "https://registry.npmmirror.com/jquery/3.6.4/files/dist/jquery.min.js"
    }
  }
</script>

@i18nsite
Copy link
Author

i18nsite commented Jun 2, 2024

我一套代码,我想国内用这个,国外用jsdriver

我不止引用一个包,我会引用一系列文件

比如xxx/[email protected]/zh.js 这样的语言文件有几百个会按需动态加载
我的前端组件会打包出去给第三方用,所以语言文件版本号我会写死在组件里,这样防止造成版本问题 。

而对方引用组件不需要写版本号,这样可以在线更新。

我一般会让这么写

<script type="importmap"> { "imports": { "xxx/": "//unpkg.com/@xxx/" } } </script>

后缀不统一就没法用了。


具体的代码:
https://atomgit.com/i18n/plugin/blob/dev/lang/src/onI18n.js

image
import bintxt from "x/bintxt.js"
import langHook from "x/langHook.js"
import { fBin } from "x/f.js"

/*
vite 打包时会自动锁定语言文件的版本号

  _I18N+"@latest/" -> _I18N+"@0.1.0/"

https://cdn.jsdelivr.net/npm/@i18n.site/[email protected]/zh.js
*/

export default langHook(async (lang) =>
	bintxt(await fBin(_I18N + "@latest/" + lang + ".js")),
)[0]

我在serviceWorker中做了url拦截,重试多个cdn网站,目前只有 npmmirror格式和其他不一样,

url不一致,各种适配都会很麻烦(虽然hack一下也能搞)

https://atomgit.com/i18n/18x/blob/dev/serviceWorker/serviceWorker.js
https://atomgit.com/i18n/18x/blob/dev/serviceWorker/Jsd.js

@fengmk2
Copy link
Member

fengmk2 commented Jun 2, 2024

importmap 没有规定这种格式,目前没有看到有什么规范,先不做支持。

@i18nsite
Copy link
Author

i18nsite commented Jun 2, 2024

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script/type/importmap#%E6%98%A0%E5%B0%84%E8%B7%AF%E5%BE%84%E5%89%8D%E7%BC%80

模块标识符映射键也可用于重新映射模块标识符中的路径前缀。请注意,在这种情况下,属性和映射路径都必须有一个尾随的正斜杠(/)。

<script type="importmap"> { "imports": { "shapes/": "./module/shapes/", "othershapes/": "https://example.com/modules/shapes/" } } </script>

然后我们可以这样导入 circle 模块。

是有这种格式。

@i18nsite
Copy link
Author

i18nsite commented Oct 17, 2024

我写的网站上线了
https://i18n.site/blog
在server worker中负载均衡到多个后端的代码

https://github.com/i18n-site/18x/blob/c45387449e3832ef510a8e53d5b45d3119626423/serviceWorker/serviceWorker.js#L71

    # - cdn.jsdmirror.cn/npm
    # - unpkg.com
    # - jsd.onmicrosoft.cn/npm
    # - fastly.jsdelivr.net/npm
    # - cdn.jsdelivr.net/npm
    # - jsd.cdn.noisework.cn/npm
    # - quantil.jsdelivr.net/npm

CleanShot 2024-10-17 at 17 41 58

但是因为 https://npmmirror.com 的路径格式不一样,就不太好处理,我提交了一个pull request,望合并

i18nsite added a commit to i18nsite/cnpmcore that referenced this issue Oct 17, 2024
@fengmk2
Copy link
Member

fengmk2 commented Oct 18, 2024

https://www.yuque.com/egg/cnpm/files 我们对 unpkg 支持的路径格式请参考这个文档。

@i18nsite
Copy link
Author

i18nsite commented Oct 18, 2024

路径格式风格能否和unpkg保持一致,也就是版本用@而不是/ , 不要files/

比如

https://unpkg.com/[email protected]/S.js

或者

https://unpkg.com/18x/S.js

如果担心路径冲突,可以考虑加一个前缀,比如类似

https://cdn.jsdelivr.net/npm/[email protected]/fBintxt.js

增加这种路径风格的支持,不影响原来路径的访问

也方便大家切换importmap的域名以及在serviceWorker中做高可用

因为 importmap 可以只配置组织前缀,比如

{
   "i/":"//unpkg.com/@8n/"
}

然后引用js, 比如 i/site/S.js 会映射到 @8n/site/S.js

而现在,而现在因为 registry.npmmirror.com 路径后缀不一致,导致不太方便切换

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants