Предположим, что у меня есть такой класс (написанный на машинописном тексте), и я связал его с веб-пакетом в 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.
5 ответов
Похоже, вы хотите представить пакет веб-пакетов в виде библиотеки. Вы можете настроить webpack так, чтобы ваша библиотека отображалась в глобальном контексте в пределах вашей собственной переменной, например EntryPoint.
Я не знаю TypeScript, поэтому вместо этого в примере используется простой JavaScript. Но важной частью здесь является файл конфигурации веб-пакета, а именно раздел output:
Webpack.config.js
module.exports = {
entry: './index.js',
output: {
path: './lib',
filename: 'yourlib.js',
libraryTarget: 'var',
library: 'EntryPoint'
}
};
Index.js
module.exports = {
run: function () {
console.log('run from library');
}
};
Тогда вы сможете получить доступ к вашим библиотечным методам, как вы ожидаете:
<script src="lib/yourlib.js"></script>
<script>
window.onload = function () {
EntryPoint.run();
};
</script>
Проверьте gist с действующим кодом.
В моих обстоятельствах я смог вызвать функцию из связанного JavaScript из другого скрипта, записав функцию в окно при ее создании.
// In the bundled script:
function foo() {
var modal = document.createElement('div');
}
// Bind to the window
window.foo = foo;
// Then, in the other script where I want to reference the bundled function I just call it as a normal function
<button onClick="window.foo()">Click Me</button>
Я не мог использовать Бабель, так что это сработало для меня.
Мне удалось заставить это работать без каких-либо дополнительных webpack.config.js модификаций, просто используя оператор import, который я вызвал из моего файла main / index.js:
import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;
Для справки вот мой weback.config.js файл.
Сначала я попытался выполнить то же самое, используя require, однако он назначил оболочку модуля window.EntryPoint, а не фактическому классу.
У меня была похожая проблема, я хотел создать пакет для нескольких страниц в пути и хотел, чтобы каждая страница имела свою точку входа в код и без отдельного пакета для каждой страницы.
Вот мой подход, который очень похож на Курта Уильямса, но с немного иной точки зрения, также без изменения конфигурации веб-пакета:
< Сильный > JourneyMaster.js
import { getViewData } from './modules/common';
import { VIEW_DATA_API_URL } from './modules/constants';
import { createLandingPage, createAnotherPage } from './modules/components/pageBuilder';
window.landingPageInit = () => {
getViewData(VIEW_DATA_API_URL).then(viewData => {
createLandingPage(viewData);
});
};
window.anotherPageInit = () => {
getViewData(VIEW_DATA_API_URL).then(viewData => {
createAnotherPage(viewData);
});
};
// I appreciate the above could be one liners,
// but readable at a glance is important to me
Затем пример того, как я вызываю эти методы в конце страницы html:
<script src="/js/JourneyMaster.js"></script>
<script>window.landingPageInit();</script>
App.ts :
namespace mytypescript.Pages {
export class Manage {
public Initialise() {
$("#btnNewActivity").click(() => {
alert("sdc'");
});
}
}
}
Mypage.html:
<input class="button" type="button" id="btnNewActivity" value="Register New Activity" />
<script type="text/javascript">
var page = new mytypescript.Pages.Manage();
page.Initialise();
</script>
En Español