时间戳

首页 > 解决方案 > webpack 对 *.js 的意外修改

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

问题描述

我是 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")
      ],

    }],
  },
};

我在这个视频课程中学到的。但之后并非所有功能都有效。例如，事件监听器调用的函数工作：

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>

我希望它稍后改变，但目前我认为它不应该是一个问题。也许是？

标签： javascriptwebpack

解决方案

Webpack 将所有代码包装在一个 IIFE 中，以实现更可预测的行为并避免全局污染等。在捆绑的代码中，定义模块函数的地方不是<script>.

内联属性事件处理程序只能引用全局变量。，并且在几乎所有情况下都是一个坏主意。虽然您可以通过将函数显式分配给 来修复它window，例如：

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

代替

function switchToScore() {
  // ...

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

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

推荐阅读