chenxch/vite-plugin-dynamic-base

Script tag of polyfill is not being transformed

gwokhov opened this issue · 23 comments

This .html file is the product from the example after build, it looks like the script tag of legacy polyfill is not being transformed.

image

Can you tell me which version you are using?

Can you tell me which version you are using?

0.4.0

Can you tell me which version you are using?

0.4.0

Okay, the code should have been rolled back by me, I'll update a fix version right away and let you know.

No no, I remembered it, this is how it is handled here, because it is nomodule, it will not be executed by default, it is loaded through the above script to get the src attribute, it turns out to be n.src=e .src, I processed it as n.src=window.__dynamic_base__+e.getAttribute('src')

Can you describe the problem you are currently facing?

@gwokhov I think I know where the problem is, nomodule will not take effect in backward browsers, it will be executed directly. I will fix it as soon as possible, thank you very much for your feedback.

@gwokhov I think I know where the problem is, nomodule will not take effect in backward browsers, it will be executed directly. I will fix it as soon as possible, thank you very much for your feedback.

I tested in IE11 and IE would not execute the script tag with type=module which was injecting dynamic base code, so the polyfill script was linked to the wrong resource.

Yes, I also found this problem through IE11, I will think about it later if I can solve this problem.

vite-legacy works with legacy browsers by:

<script type="module">!function(){if(window.__vite_is_dynamic_import_support)return;
    console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");
    var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");
    n.src=window.__dynamic_base__+e.src,n.onload=function(){
      System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))
    },
    document.body.appendChild(n)}();</script>

the script will load vite-legacy-polyfill by create a brand new <script /> with __dynamic_base__ prefix.

<script nomdule />s will not be execute by browsers.

vite-legacy works with legacy browsers by:

<script type="module">!function(){if(window.__vite_is_dynamic_import_support)return;
    console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");
    var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");
    n.src=window.__dynamic_base__+e.src,n.onload=function(){
      System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))
    },
    document.body.appendChild(n)}();</script>

the script will load vite-legacy-polyfill by create a brand new <script /> with __dynamic_base__ prefix.

I am also planning to make another loader in the body.

<script nomdule />s will not be execute by browsers.

Will be executed in IE11.

how about transform legacy scripts from:

<script nomodule id="vite-legacy-polyfill" src="/assets/polyfills-legacy.c9aac887.js"></script>
  <script nomodule id="vite-legacy-entry" data-src="/assets/index-legacy.b6066e67.js">System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>

to:

<script nomodule id="vite-legacy-polyfill">
!(function() {
  var e = document.createElement('script')
  e.src = window.__dynamic_base__ + "/assets/polyfills-legacy.c9aac887.js";
  e.onload = function() {
    System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))
  };
  document.body.appendChild(e)
})();
</script>
<script nomodule id="vite-legacy-entry" data-src="/assets/index-legacy.b6066e67.js"></script>

I will release a version soon, and I can help give pointers when that time comes.

@gwokhov You can try version 0.4.1

@gwokhov You can try version 0.4.1

Not work, the .html was blocked at #vite-legacy-entry script tag, cause System is defined in polyfill, maybe it is not a good idea to patch at the bottom.

@gwokhov You can try version 0.4.1

Not work, the .html was blocked at #vite-legacy-entry script tag, cause System is defined in polyfill, maybe it is not a good idea to patch at the bottom.

Can you provide the error message?

@gwokhov You can try version 0.4.1

Not work, the .html was blocked at #vite-legacy-entry script tag, cause System is defined in polyfill, maybe it is not a good idea to patch at the bottom.

Can you provide the error message?

image
image

image
It seems that the results we got are not the same, it's okay, I will deal with it more comprehensively, and leave a message for you later, you can try the new version tomorrow morning.

@gwokhov You can try version 0.4.1

Not work, the .html was blocked at #vite-legacy-entry script tag, cause System is defined in polyfill, maybe it is not a good idea to patch at the bottom.

Can you provide the error message?

image image

how about transform legacy scripts from:

<script nomodule id="vite-legacy-polyfill" src="/assets/polyfills-legacy.c9aac887.js"></script>
  <script nomodule id="vite-legacy-entry" data-src="/assets/index-legacy.b6066e67.js">System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>

to:

<script nomodule id="vite-legacy-polyfill">
!(function() {
  var e = document.createElement('script')
  e.src = window.__dynamic_base__ + "/assets/polyfills-legacy.c9aac887.js";
  e.onload = function() {
    System.import(window.__dynamic_base__+document.getElementById('vite-legacy-entry').getAttribute('data-src'))
  };
  document.body.appendChild(e)
})();
</script>
<script nomodule id="vite-legacy-entry" data-src="/assets/index-legacy.b6066e67.js"></script>

you are right.

@gwokhov You can try version 0.4.2 through @zhoujinfu scheme

@gwokhov You can try version 0.4.2 through @zhoujinfu scheme

Thanks a lot, it works as expected now.

I'll close this question then, thank you for your use and feedback, and have a nice day.