Как я могу получить доступ к своему javascript после веб-пакета?

Question

У меня есть опыт работы с Javascript и jQuery, но я новичок в webpack.

У меня есть файл с именем test1. js:

exports.func1 = function() {
    window.alert('hello from func 1');
};

Затем у меня есть индекс. js, который содержит следующее:

import test1 from "./test1"

Мой webpack.config. js содержит:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'), //folder to put the output file
  },
};

Я включил приложение. js на мою веб-страницу, и это нормально, в консоли нет ошибок по поводу файла. Я хочу вызвать func1() с помощью нажатия кнопки, например, <button onclick="func1()">Test</button>.

Когда я это делаю, я получаю «func1 is notfined» в выводе консоли. Webpack не показывает никаких ошибок, когда я запускаю его, так что, должно быть, я так или иначе вызываю функцию.

Я должен что-то делать или не делать, действительно глупо. Может ли кто-нибудь помочь, как я, кажется, ходить по кругу? Благодаря.

Answer 1

Измените test1. js на:

export default () => {
    window.alert('hello from func 1');
};

Тогда в вашем индексе. js:

export { default as test1 } from "./test1"

Если вы хотите использовать в HTML, вы должны построить библиотеку и обновите ваш веб-пакет, как показано ниже:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'), //folder to put the output file
    library: 'myApp',
    libraryTarget: 'umd',
  },
};

Теперь ваша функция экспортирована и должна быть доступна для использования.

Answer 2

Это потому, что test1 является экспортируемым объектом. func1 является свойством test1.

test1.func1() will invoke the function

Вы также можете импортировать его путем деструктуризации. Попробуйте следующее:

import { func1 } from './test1'