javascript - webpack 对 *.js 的意外修改

Question

我是 webpack 和类似工具的新手。我想重新组织我的项目。目前我所有的 JS 代码都位于 App.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")
      ],

    }],
  },
};

这是我在 this 学到的视频类(class)。但之后并非所有功能都可以使用。例如，事件监听器调用的函数起作用:

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>

请注意，我仍然从 HTML 引用其他一些 js 文件:

<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> 的顶层.

内联属性事件处理程序 may only reference global variables. ，并且几乎在所有情况下都是一个坏主意。虽然您可以通过将函数显式分配给 window 来修复它，例如:

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

而不是

function switchToScore() {
  // ...

完全删除内联属性事件处理程序并使用 Javascript 附加监听器会更好，就像您所做的那样

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