Предположим, что у меня есть такой класс (написанный на машинописном тексте), и я связал его с веб-пакетом в 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.

133
Raven 18 Дек 2015 в 17:07

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 с действующим кодом.

133
Legends 7 Мар 2018 в 01:33

В моих обстоятельствах я смог вызвать функцию из связанного 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>

Я не мог использовать Бабель, так что это сработало для меня.

13
Kurt William 29 Сен 2017 в 16:55

Мне удалось заставить это работать без каких-либо дополнительных webpack.config.js модификаций, просто используя оператор import, который я вызвал из моего файла main / index.js:

import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;

enter image description here

Для справки вот мой weback.config.js файл.

Сначала я попытался выполнить то же самое, используя require, однако он назначил оболочку модуля window.EntryPoint, а не фактическому классу.

52
Matt 18 Дек 2015 в 15:17

У меня была похожая проблема, я хотел создать пакет для нескольких страниц в пути и хотел, чтобы каждая страница имела свою точку входа в код и без отдельного пакета для каждой страницы.

Вот мой подход, который очень похож на Курта Уильямса, но с немного иной точки зрения, также без изменения конфигурации веб-пакета:

< Сильный > 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>
1
Darren Sweeney 30 Янв 2019 в 07:48

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>
-4
Liam 16 Июн 2017 в 09:13