Javascript Migration to Import/Export Do I Have to Rewrite Every Script Simultaneously?

My website, started in 1993, contains thousands of pages and hundreds of Javascript files. These are written in the 1990s style with each individual Javascript file imported by the HTML page, for example:

      <script src="/jscripts/js20/http.js" type="text/javascript">        </script>        <script src="/jscripts/util.js" type="text/javascript">        </script>        <script src="/genealogy.js" type="text/javascript">        </script>  

genealogy.js depends upon both http.js and util.js and util.js depends upon http.js. FYI the specific page is at https://www.jamescobban.net/genealogy.php?lang=en and is documented at https://github.com/jcobban/Genealogy/wiki/TopLevel-genealogy.php

Now at the level of individual files I understand what needs to be done. I have experimented editing one library file and one application file that depends on that one library file and run the combination past eslint and it is happy. In the "library" files I insert "export " in front of everything those libraries are exporting, basically most functions and consts. At the front of util.js and genealogy.js I add the import for those specific resources that they reference, using the error messages from eslint to guide me. I then delete all of the now redundant <script> statements from the one HTML page that uses genealogy.js.

That is fine for learning and testing. I can obviously make one page work. But do I have to change every one of the thousands of files in my site simultaneously once I start this process? For example if I add the import statements to some but not all of the hundreds of Javascript files with dependencies, and I do not delete every single now redundant <script> tag will my site fail? Will the browser complain if a "library" file is included by HTML as well as by Javascript import or will it be included twice? Will the addition of export statements to library files make it impossible for application scripts that are still coded to ES3 to access the resources they did when the library file did not have the export statements?

I have tried experimenting by renaming all of the files which use import and export. So at the top of my application script I have:

import HTTP from "../jscripts/js20/http6.js";  import {iframe, actMouseOverHelp, openFrame, openSignon, debug, args,          getOffsetLeft, getOffsetTop, popupAlert, show,          showHelp, hideHelp, helpDiv, helpElt, keyDown,          eltMouseOver, eltMouseOut}              from "../jscripts/util6.js";  import {capitalize} from "../jscripts/CommonForm6.js";  import Cookie from "../jscripts/Cookie6.js";  

This satisfies eslint but fails at run time.

I get "Uncaught SyntaxError: import not found: default in the library script CommonForm.js. The line it is complaining about is:

import HTTP from "../jscripts/js20/http6.js";    

Which puzzles me because that is exactly the same as the first import from my application script.

https://stackoverflow.com/questions/66630326/javascript-migration-to-import-export-do-i-have-to-rewrite-every-script-simultan March 15, 2021 at 06:46AM