Предположим, у меня есть такой класс (написанный на машинописном тексте), и я связываю его с webpack в bundle.js
.
export class EntryPoint {
static run() {
...
}
}
В свой index.html я включу пакет, но затем я также хотел бы вызвать этот статический метод.
<script src="build/bundle.js"></script>
<script>
window.onload = function() {
EntryPoint.run();
}
</script>
Однако EntryPoint
в этом случае не определено. Как тогда мне вызвать связанный javascript из другого скрипта?
Добавлено : конфигурационный файл Webpack .
javascript
html
typescript
webpack
ворон
источник
источник
var EntryPoint = require('EntryPoint')
в вашемonload
методе чего-то не хватает .require
может потребоваться что-то вроде , но такое же, как с импортом ниже, говорится в немrequire is not defined
. Я пытаюсь использовать объединенный контент из простого javascript, не понадобится ли мне снова использовать какой-то фреймворкrequire
? Но я пытаюсь этого избежать. Надеюсь, это имеет смысл.Ответы:
Похоже, вы хотите выставить пакет webpack как библиотеку . Вы можете настроить webpack для отображения вашей библиотеки в глобальном контексте внутри вашей собственной переменной, например
EntryPoint
.Я не знаю TypeScript, поэтому вместо этого в примере используется простой JavaScript. Но важной частью здесь является файл конфигурации веб-пакета, и в частности
output
раздел:webpack.config.js
index.js
Тогда вы сможете получить доступ к методам своей библиотеки, как вы ожидаете:
Проверьте суть с реальным кодом.
источник
library: ["GlobalAccess", "[name]"],
. Затем это делает var объектом с членами для каждой точки входа: GlobalAccess.EntryPointFoo, GlobalAccess.EntryPointBar и т. Д.nam run build
но не работает в dev env usingwebpack-dev-server
. Моя экспортированная EntryPoint - пустой объект. Любые идеи?export function run() {}
frommodule.exports = ...
Мне удалось заставить это работать без каких-либо дальнейших
webpack.config.js
изменений, просто используяimport
оператор, который я вызвал из моего файла main / index.js:Для справки вот мой
weback.config.js
файл.Первоначально я пытался сделать то же самое с помощью
require
, однако он назначил оболочку модуля,window.EntryPoint
а не фактический класс.источник
Uncaught SyntaxError: Unexpected token import
. Или у васindex.js
тоже есть пакет (я вижу это как точку входа, но не уверен)?В моих обстоятельствах я смог вызвать функцию из связанного JavaScript из другого скрипта, записав функцию в окно при его создании.
Я не мог использовать Babel, поэтому у меня это сработало.
источник
У меня была аналогичная задача: я хотел создать пакет для нескольких страниц в рамках путешествия и хотел, чтобы каждая страница имела собственную точку входа в код и без отдельного пакета для каждой страницы.
Вот мой подход, который очень похож на Курта Уильямса, но под немного другим углом, также без изменения конфигурации веб-пакета:
JourneyMaster.js
Затем пример того, как я вызываю эти методы в конце
html
страницы:источник
WEBPACK.CONFIG.JS
1. ИСПОЛЬЗОВАНИЕ UMD
index.html
main.js
2. ИСПОЛЬЗОВАНИЕ VAR
index.html
main.js
3. ИСПОЛЬЗОВАНИЕ AMD в качестве библиотеки, которую мы используем как (для тех, кто хочет сделать lib)
источник
App.ts:
mypage.html:
источник