Vite: Extra <script> block in index.html gets deleted when compiled. How to Retain?

Created on 18 Aug 2020  Â·  16Comments  Â·  Source: vitejs/vite

If I add extra script within index.html it gets deleted when compiled:
How can I use the below code while having rollup rename main to main.hash.js / .jsc without deleting it when compiled?

  <script>
    const fs = require('fs');
    const bytenode = require('bytenode');
    if (!fs.existsSync('./_assets/main.jsc')) {
      bytenode.compileFile('./_assets/main.js', './_assets/main.jsc');
    }
    require('./_assets/main.jsc');
  </script>
  <!-- <script src="./_assets/main.jsc"></script> -->
  • vite version: vite v1.0.0-rc.4
  • Operating System: Windows 10 Enterprise LTSC
  • Node version: v12.18.2
  • Optional:

    • yarn version: 1.22.4

    • Installed vue version (from `yarn.lock``) ^3.0.0-rc.5

    • Installed @vue/compiler-sfc version ^3.0.0-rc.5

pending triage

Most helpful comment

@cliqer Can you detailed explain the expected behaviour and give a reproduction for this?

@underfin my personal need is to add a script for bytenode that will be compiled with electron but it seems that controlling how this gets compiled is something also needed in multiple other occasions.
There is nothing special to reproduce. Just add the above within index.html and compile.

All 16 comments

You can't use node api (fs) in the browser

@Akiyamka, this is supposed to be used within electron when built.

Can you have a try with code https://github.com/vitejs/vite/pull/724 and add type for scrpit? I'm not sure this can be build by electron.

  <script type="retain"> // add type
    const fs = require('fs');
    const bytenode = require('bytenode');
    if (!fs.existsSync('./_assets/main.jsc')) {
      bytenode.compileFile('./_assets/main.js', './_assets/main.jsc');
    }
    require('./_assets/main.jsc');
  </script>

Thank you @underfin and yes, it can be built with electron.
Tried it manually but with no luck on automating the process with rollup.
Unfortunately, it still gets removed on build :/

same question, looking for resolving ....

Same issue here with a simple Google Analytics script… :/

@cliqer Can you detailed explain the expected behavior and give a reproduction for this?

@underfin I believe the script should stay in the file without being compiled or removed…?

do you mean that, how to replace main.js with main.$hash.js (index.$hash.js) in script automatically without merging this script into bundle index.$hash.js ?

I'd say so, that makes sense that if we have an inline script tag in the HTML that should stay there.

@cliqer Can you detailed explain the expected behaviour and give a reproduction for this?

@underfin my personal need is to add a script for bytenode that will be compiled with electron but it seems that controlling how this gets compiled is something also needed in multiple other occasions.
There is nothing special to reproduce. Just add the above within index.html and compile.

Can you move the script to a file under public/bytenode-compile.js, and fetch it with

<script type="module">
require('/bytenode-compile.js')
</script>

in the index.html?

At least that works with a node-compiled service worker, that has to be compiled _after_ rollup has finished.

Can you move the script to a file under public/bytenode-compile.js, and fetch it with

<script type="module">
require('/bytenode-compile.js')
</script>

in the index.html?

At least that works with a node-compiled service worker, that has to be compiled _after_ rollup has finished.

This doesn't seem to fix the issue, at least not on my side.

That would be good to be able to do that, any progress on this? It's quite crucial for Analytics.

@cliqer any solution to resolve this problem? i have the same prolem on my electron app, i almost finish the code , but dead when build the app orz...

@wongwithhisfellowpartners I still have not found a solution for this.
I can manage to compile the final js within the electron app by using electron-builder's beforeBuild but can't figure out how to manipulate index.html to include the compiled script before it gets built.
I assume this manipulation has to happen within rollup but still haven't figured that out.

@cliqer did you occur some problem like can not found module on your app that appeared when build the electron app with vite and rollup when use some dependence base on nodejs?

Was this page helpful?
0 / 5 - 0 ratings