WEB front-end: after es6 is converted to es5, the es5 modular code is packaged, and the loading package script still reports an error.

basic information of the project:

< H2 > I use the ol map plug-in to use the drag-and-drop function. After searching the official website, I found that the relevant code is es6, so I did not touch it, so I learned that the current browser support of es6 is not ideal, and then I used babel to convert es6 to es5,. At this time, I found that the converted es5 is modular, there are a large number of require functions, and the browser cannot support it. Finally, I looked up the information and said that I needed to package the modular JS of es5. I was a rookie sequencer. I don"t quite understand the meaning of packaging, so it means to use relevant tools to merge the various JS with dependent (require) into one, so I used grunt to package. Later, I checked that the output JS, did merge a lot of JS in it. I thought HTML loaded the merged JS, but. The questions are as follows < / H2 >

question :
run HTML prompt require not default,
then I load the require.js,HTML error: Uncaught Error: Module name "ol/index.js" has not been loaded yet for context: _. Use require ([])., the problem I know so far is that the require-related writing format involved in the merged JS is not appropriate (the), babel transferred to es5 on the Internet is: var _ index = require ("ol/index.js");
but the browser prompts me that I should use the "require ([])" format.
but if I modify it manually, it will be a huge workload. There are too many levels of dependency

question
1, whether I misunderstand the modular syntax such as require, especially the meaning of "package".
2, the map plug-in I refer to can be run in HTML, whether my environment is deployed and configured incorrectly, and if so, why can I use grunt to merge a large number of modular JS.
3. If it"s just a "require ([])" format, is there any way to output in this format when es6 is converted to es5?

Mar.28,2021
Menu