HTML ошибка при использовании функций из пакета. js - PullRequest
Новая
       72

HTML ошибка при использовании функций из пакета. js

0 голосов
/ 02 мая 2020

Я создал пакет. js файл, используя веб-пакет для упорядочивания всего моего javascript кода. Я ожидал использовать его в моем файле html, но у меня были проблемы с использованием этой функции. Всегда возникает ошибка, когда я пытаюсь вызвать функцию index.html:9 Uncaught TypeError: App.testButton is not a function at setup.

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

Что я делаю не так?

Приложение. js

import testButton from './testButton.js';

console.log("I'm the entry point");
testButton();

testButton. js 

function testButton()
{
    console.log("Test Button");
};

export default testButton;

index. html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="dist/bundle.js"></script>
  <script>
  function setup()
    {
        console.log("Initializing a webpage");
        App.testButton()
    }
  </script>
</head>
<body onload="setup();">
</body>
</html>

webpack.config. js

const path = require('path');

module.exports = {
  entry: './app.js',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'App'
  },
};

1 Ответ

0 голосов
/ 02 мая 2020

Я нашел, что это работает для меня. Мне нужно было изменить приложение. js, чтобы включить babel, чтобы я мог использовать ES5, что позволило мне использовать require для заполнения module.exports.

App. js

require('babel-register')({
    presets: ['env']
});

module.exports = {
    testButton: require('./testButton.js'),
    testButton2: require('./testButton2.js')
};

testButton. js

export function testButton()
{
    console.log("Test Button");
};

testButton2. js

export function testButton()
{
    console.log("Test Button 2");
};

index. html

function setup()
{
    App.testButton.testButton();
    App.testButton2.testButton();
}
</script>

Вывод на консоль Кнопка тестирования Кнопка тестирования 2

...