Экспорт и объединение функции с помощью веб-пакета и вызов ее внутри тега сценария HTML

Dec 15 2020

Я пробовал что-то очень простое - экспортировать и объединять (и транслировать babel) функцию с помощью webpack, а затем вызывать ее в теге сценария моей html-страницы.

sample.js - в комплекте с webpack

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Конфигурация Webpack (версия = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

Я , хотя это было так же легко , как добавление libraryи libraryTargetцелей в WebPack конфигурацию , а затем я должен быть в состоянии назвать свою функцию MyLibrary.sampleFunctionExported1().

Но когда я делаю это MyLibraryв своей консоли браузера, он отображается, как показано ниже, и MyLibrary.sampleFunctionExported1()возвращает ... is not a functionошибку

Я следил за предложениями во многих из этих вопросов / ответов: ответ 1 , ответ 2 , ответ 3 и различные другие сообщения в блоге, но это совсем не работает для меня.

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

Изменить 1: вот это файл, созданный после сборки веб-пакета: /public/js/sample.js

PS - Игнорируйте entry2.jsфайл, поскольку это пустой файл, я просто добавил его, чтобы показать свою конфигурацию, и потому что я не уверен, может ли наличие нескольких точек входа вызвать эту проблему, с которой я сталкиваюсь в настоящее время.

Ответы

1 Jacob Dec 15 2020 at 03:21

Из-за того, как вы экспортируете:

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

... ваша MyLibraryпеременная будет иметь форму:

{
  default: function() { ... }
}

Если вместо этого вы хотите, чтобы он имел форму:

{
  sampleFunctionExported1: function() { ... }
}

... вам нужно выполнить именованный экспорт вместо экспорта по умолчанию:

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}