неожиданное изменение *. js через веб-пакет

Question

Я новичок в вебпаке и подобных инструментах. Я хотел реорганизовать свой проект. В настоящее время весь мой JS -код живет в приложении. js. Поэтому, прежде чем разбить его на модули и улучшить, я хотел просто настроить рабочий процесс для его копирования. Это содержимое webpack.config. js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    App: "./app/assets/scripts/App.js"
  },
  output: {
    path: path.resolve(__dirname, './app/temp/scripts'),
    filename: '[name].js',
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      },

      test: /\.js$/,

      include: [
        path.resolve(__dirname, "app")
      ],
      exclude: [
        path.resolve(__dirname, "node_modules")
      ],

    }],
  },
};

, которое я изучил на этом видеокурсе. Но потом не все функции работают. Например, функции, вызываемые слушателями событий, работают:

function initOnClickForVersionBtns() {
    $('#btn_soprano').click(function () {
        voice = 1;
        loadFile();
    });

    $('#btn_basset').click(function () {
        voice = 2;
        loadFile();
    });

}

Но функции, вызываемые из HTML, не:

<a href="javascript:void(0);" onclick="switchToScore();">Score</a>

Обратите внимание, что я все еще ссылаюсь на несколько других js файлы из HTML:

<script src="../javascript/basic-events.js" type="text/javascript">/**/</script>
<script src="../javascript/bootstrap.min.js" type="text/javascript">/**/</script>
<script src="../javascript/jquery-3.3.1.min.js" type="text/javascript">/**/</script>

Я бы хотел, чтобы это изменилось позже, но сейчас я подумал, что это не должно быть проблемой. Может быть, это так?

Answer 1

Webpack оборачивает весь код в IIFE для более предсказуемого поведения и, среди прочего, для предотвращения глобального загрязнения. В связанном коде местом, где определяются функции вашего модуля, является , а не верхний уровень <script>.

Встроенные обработчики событий атрибута могут ссылаться только на глобальные переменные. , и это довольно плохая идея почти во всех случаях. Хотя вы можете исправить это, явно назначив функцию window, например:

window.switchToScore = function() {
  // ...

вместо

function switchToScore() {
  // ...

Было бы намного лучше удалить встроенные обработчики событий атрибута полностью, и присоедините слушателей с помощью Javascript, как вы делаете с

$('#btn_soprano').click(function () {
    voice = 1;
    loadFile();
});