Jak zaimportować klasę do pliku HTML?

0

Jak moge zaimportowac klase do pliku HTML i ja wywolac? W chwili obecnej uzywam plikow bundled.min w taki sposob i to dziala (pojawia sie edytor):

<!DOCTYPE html>
<html>
	<head>
		<title>Markdown Editor</title>
		<!--include Stacks -->
		<link
			rel="stylesheet"
			href="./node_modules/@stackoverflow/stacks/dist/css/stacks.css"
		/>
		<!-- include the bundled styles -->
		<link
			rel="stylesheet"
			href="./node_modules/@stackoverflow/stacks-editor/dist/styles.css"
		/>

		<!--include Stacks -->
		<script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.js"></script>
		<!-- include the bundle -->
		<script src="./node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>

	</head>

	<body>
		<div style="margin: 20px; width: 800px">
			<div id="editor-container"></div>
			<!-- initialize the editor -->
			<script>
				new window.stacksEditor.StacksEditor(
					document.querySelector("#editor-container"),
					"*Your* **markdown** here",
					{}
				);
			</script>
		</div>
	</body>
</html>

Niestety ja nie chce uzywac tych plikow min tylko chce uzywac oryginalnych plikow zeby moc je edytowac i debugowac. Zrobilem tak:

<!DOCTYPE html>
<html>
	<head>
		<title>Markdown Editor</title>
		<!--include Stacks -->
		<link
			rel="stylesheet"
			href="./node_modules/@stackoverflow/stacks/dist/css/stacks.css"
		/>
		<!-- include the bundled styles -->
		<link
			rel="stylesheet"
			href="./node_modules/@stackoverflow/stacks-editor/dist/styles.css"
		/>

		<!--include Stacks -->
		<script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.js"></script>

		<script
			type="module"
			src="./node_modules/@stackoverflow/stacks-editor/dist/stacks-editor/editor.js"
		></script>
	</head>

	<body>
		<div style="margin: 20px; width: 800px">
			<div id="editor-container"></div>
			<!-- initialize the editor -->
			<script>
				new StacksEditor(
					document.querySelector("#editor-container"),
					"*Your* **markdown** here",
					{}
				);
			</script>
		</div>
	</body>
</html>

Ale dostaje blad w konsoli:
screenshot-20230617145148.png

Sam plik editor.js wyglada tak (jego poczatek):
screenshot-20230617145232.png

Co musze zmienic w kodzie zeby zazcelo dzialac?

2

jeśli korzystasz z modułów ES6, to możesz po prostu zaimportować coś w JS:

<script type="module"> 
  import { Foo } from 'bar';
  //....

choć nie wiem, czy ci to zadziała w tej konfiguracji dokładnie, którą masz.

Co musze zmienic w kodzie zeby zazcelo dzialac?

Nie wiem, czy to dobre pytanie. Czy czujesz różnicę między

  • skryptami zwykłymi (gdzie skrypty, żeby wystawić jakąś zmienną na zewnątrz, mogą zdefiniować zmienną globalną)
  • skryptami z type="module", gdzie się importuje i eksportuje rzeczy
  • użyciem bundlera takiego jak Webpack, Esbuild itp. gdzie używasz na dysku modułów z ES6, ale jest to potem zamieniane?

?
Jeśli nie do końca czujesz tę różnicę (a sposób zadania pytania trochę sugeruje, że mieszasz różne podejścia), to znaczy, że powinieneś się cofnąć do podstaw. No i jak używasz zewnętrznych bibliotek instalowanych przez npm, to zwykle najłatwiejszym sposobem ich użycia jest użycie bundlera, który pozwala ci na używanie wszędzie modułów, a do przeglądarki leci gotowy bundle.

No i bundler może ci też zamienić jedno podejście w drugie - np. w pliku editor.js masz eksport z ES6:

export class StacksEditor

natomiast w swoim kodzie chcesz użyć zmiennej globalnej

<script>
  new StacksEditor(
      document.querySelector("#editor-container"),
      "*Your* **markdown** here",
      {}
  );

można skonfigurować bundler, żeby robił ci zmienne globalne (zresztą w pierwszym snippecie z kodem mówiłeś, że ci działało new window.stacksEditor.StacksEditor - czyli znaczy, że masz zmienną globalną stacksEditor, bo właściwości obiektu window to zmienne globalne).

Pytanie jednak, jaki jest twój prawdziwy problem? Bo owijasz w bawełnę trochę.

Niestety ja nie chce uzywac tych plikow min tylko chce uzywac oryginalnych plikow zeby moc je edytowac i debugowac. Zrobilem tak:

Po co chcesz edytować oryginalne pliki biblioteki?

0
LukeJL napisał(a):

Po co chcesz edytować oryginalne pliki biblioteki?

Żeby dodac swoje funkcjonalnosci do edytora. Takie cos nie dziala (ma problemy zeby znalezc te importy wewnatrz editor.js

<script type="module">
    import { StacksEditor } from "./node_modules/@stackoverflow/stacks-editor/dist/stacks-editor/editor.js";
</script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1