Как обрабатывать глобальные функции и глобальные переменные с помощью веб-пакета

addMethod.js

function add(){
  // do something
}

Скажем, у меня есть функция add, к которой можно получить глобальный доступ. Но когда я связал этот файл с webpack (v4), я столкнулся с ошибкой add of undefined при запуске этого файла в браузере.

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

Проблема в более крупном проекте, как мне справиться с такими проблемами?

Я знаю, что могу использовать ключевое слово export or window.

Но я ищу любой плагин для веб-пакетов, который позаботится об этом, вместо того, чтобы обновлять каждый файл в моем проекте?

Примечание. Версия Webpack — 4 и ES5


person Manjunath Davanam    schedule 05.07.2018    source источник


Ответы (1)


Если вы не хотите импортировать эти функции в каждый файл, вы можете добавить свои функции global, например, в файл с именем globals.js, а затем добавить следующее в конфигурацию вашего веб-пакета:

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      'global': [path_to_global.js] 
    }
  },

  plugins: [
    new webpack.ProvidePlugin({
      'global': 'global'
    })
  ]  
}

Затем вы можете вызывать свои функции с помощью global.yourFunction() в любом месте вашего приложения.

person deowk    schedule 05.07.2018
comment
Я получил ваш ответ. Допустим, проблема в том, что это большой проект, и в нем много глобальных переменных и глобальных функций. Итак, я должен проверить каждый файл и обновить его до global.functionName везде, верно? Я думаю, это не лучший способ обновить каждый файл только из-за веб-пакета. - person Manjunath Davanam; 05.07.2018
comment
Думаю, лучше иметь какой-нибудь плагин для веб-пакетов для решения таких проблем. Я прав? - person Manjunath Davanam; 05.07.2018
comment
Предположим, если я удалю веб-пакет позже, я столкнусь с ошибкой, верно? global of undefined - person Manjunath Davanam; 05.07.2018
comment
Да, вам нужно будет переместить все ваши глобальные функции в один и тот же файл, если у вас есть глобальные переменные, вам нужно будет использовать DefinePlugin для их отображения. Вам придется проделать некоторую работу, чтобы привести проект в соответствие с лучшими практиками. ИЛИ вы можете просто поместить их все на объект окна и принять связанные с этим риски. - person deowk; 05.07.2018
comment
@ManjunathDavanam, зачем вам удалять веб-пакет? - person deowk; 05.07.2018
comment
Просто я говорю, что позже появился какой-то другой лучший инструмент, чем webpack - person Manjunath Davanam; 05.07.2018
comment
@ManjunathDavanam Тогда вы не можете серьезно ожидать, что весь ваш проект будет построен с этим other best tool без каких-либо изменений. - person deowk; 05.07.2018
comment
Да, я согласен с тобой @deowk. Я говорю только из-за веб-пакета, мы не должны касаться кода правильно.. Единственное, что я чувствовал, что веб-пакет не лучше всего подходит для ES5, я прав? - person Manjunath Davanam; 05.07.2018
comment
Если у вас есть глобальные функции в вашем приложении, мое личное мнение таково, что лучше добавлять к этим методам префикс global, потому что любой разработчик, просматривающий ваш код, сразу поймет, что он смотрит на глобальную функцию. На самом деле, если вы собираетесь добавить их в объект window, я бы даже рекомендовал использовать для них такое же пространство имен. (с более уникальным именем, конечно) - person deowk; 05.07.2018
comment
Круто, я подумаю @deowk - person Manjunath Davanam; 05.07.2018
comment
Еще одно уточнение. На самом деле то, что я сделал вместо того, чтобы трогать каждый файл, я просто написал файл-оболочку, чтобы выставить его как глобальную переменную (ссылка: .github.com/manjudr/e9494a409e90ff85066a87c3aacad44a), но все же я столкнулся с проблемой add of undefined у вас есть идеи по этому поводу? @deowk - person Manjunath Davanam; 05.07.2018
comment
Давайте продолжим это обсуждение в чате. - person Manjunath Davanam; 05.07.2018