Uncaught ReferenceError - как получить доступ к функции, связанной с веб-пакетом
Я использую https://github.com/sloria/cookiecutter-flask для проекта, и я пытаюсь добавить функцию javascript в файл js, который связан с веб-пакетом, и получить к нему доступ из html. Я думаю, что мне не хватает чего-то базового.
Исходные файлы для фона:
- https://github.com/sloria/cookiecutter-flask/blob/master/%7B%7Bcookiecutter.app_name%7D%7D/webpack.config.js
- https://github.com/sloria/cookiecutter-flask/blob/master/%7B%7Bcookiecutter.app_name%7D%7D/assets/js/plugins.js
Я добавляю в plugins.js следующий код:
function foo () {
console.info('bar')
}
И пытаюсь вызвать его из html-документа для проверки следующим образом
<script type = "text/javascript">
foo();
</script>
Я вижу, что моя функция была объединена, но я не могу получить к ней доступ.
И вот ошибка, которую я получаю:
Мне уже пришлось добавить expose-loader в мой webpack.config.js, чтобы jquery работал согласно Эта проблема:
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В моем опыте, когда я использую Webpack, я объединяю код в модули, которые инкапсулируют их в область видимости этого модуля. Код, который я хочу быть доступен вне модуля, я явно export, а затем import или require в новую область, где я хочу получить к нему доступ.
Похоже, вы вместо этого хотите, чтобы часть вашего кода была доступна в области Глобальный, чтобы получить доступ к ней непосредственно из вашей разметки. Чтобы сделать это в браузере, лучше всего прикрепить его непосредственно к объекту Window. Вероятно, сначала проверьте, не перезаписываете ли вы что-то уже в этом пространстве имен:
function foo() {
console.info('bar!');
}
if (!Window.foo) {
Window.foo = foo;
} else {
console.warn('Foo is already assigned!');
}
Тем не менее, я бы порекомендовал вам избегать подобной разработки - загрязнение глобального пространства имен обычно не является хорошим шаблоном и приводит к большому количеству потенциальных конфликтов. Если вы должен работает таким образом, по крайней мере, назначьте объект пространству имен, прикрепленному к Window, где вы можете разместить функциональные возможности своих приложений, не рискуя конфликтом с другими свойствами Window:
Window.myApp = {
foo: function () {
console.info('bar!');
}
}
Window.myApp.printGreeting = function () {
console.info('Hello!');
}
// ...etc
@sshevlyagin - это зависит от того, используете ли вы синтаксис ES6 или синтаксис модуля Node. Если вы используете ES6, вам следует проверить страницы Импортировать и экспорт на MDN. Как правило, я бы сказал, что если вы экспортируете только одну функцию из модуля, вы можете использовать export default myFunction. Затем его можно записать на import с любым именем: import theFunction from './../someFolder/myFunction'.
Спасибо, Александр. Я провел еще несколько экспериментов, и похоже, что то, как веб-пакет настраивает файл js, в который я добавляю вещи, ожидает jquery. Я собираюсь опубликовать, как я это исправил в jquery.
Я не мог понять, как заставить синтаксис ES6 работать в файле, постоянно сталкивался с этой ошибкой:
Вот обходной путь, основанный на этом связанный вопрос
Спасибо за быстрый ответ Александр. Я счастлив определить модуль. Я зацикливаюсь на синтаксисе. Как выглядит простой модуль, в котором есть только одна функция, которая регистрирует строку? Как мне потом его импортировать? В частности, webpack генерирует JS-файл с хешем, поэтому я не уверен, что вставить после, например, «import Module from»