Javascript - 如何在 webpack 中的两个函数中使用变量？

Question

I have to migrate old, plain HTML with plain JS files to webpack but I have troubles when I have a variable declared outside functions and used between multiple functions below them.我必须将带有普通 JS 文件的旧的、普通的 HTML 迁移到webpack但是当我在函数外部声明一个变量并在它们下面的多个函数之间使用时遇到了麻烦。

One of the example:示例之一：

// import stuff

var recorder;
var blobs = [];

function recordStart() {
  recorder = new MediaRecorder(...);
  blobs = []
  recorder.ondataavailable = (event) => {
    console.log("recording");
    if (event.data) blobs.push(event.data);
  };
  recorder.onstop = function(){...};
  recorder.start();
}

function recordEnd() {
  recorder.stop();
}

$('#capture_button').on('touchstart mousedown', function() {
  recordStart();
})
$('#capture_button').on('touchend mouseup', function() {
  recordEnd();
})

However, everytime recordEnd is called, JS console always throw undefined error on recorder object, as if the variable never even touched at all by the recordStart function.但是，每次recordEnd时，JS 控制台总是在recorder object 上抛出undefined的错误，就好像该变量根本没有被recordStart function 触及一样。

Is there something that I do wrong here?我在这里做错了什么吗？ I just learn webpack for a week so please bear with me if this is a rookie mistake.我刚刚学习了一周的webpack ，所以如果这是一个新手错误，请多多包涵。

PS. PS。 jQuery runs fine, if I run console.log() in them they would fire properly. jQuery 运行良好，如果我在其中运行console.log()他们会正常触发。

Edit: I forgot to mention this issue happens only after I run npx webpack on it with this configuration:编辑：我忘了提到这个问题只有在我使用这个配置运行npx webpack之后才会发生：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: false,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|glb|gltf|usdz)$/i,
        type: 'asset/resource',
      }
    ]
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {from: "src/images", to: "images"},
        {from: "src/maps", to: "maps"},
        {from: "src/models", to: "models"}
      ]
    })
  ]
};

It runs well before I migrate to webpack , but after I bundled with it and include the dist/bundle.js in the HTML in dist/index.html the undefined error happens.在我迁移到webpack之前它运行良好，但是在我与它捆绑并将 dist/bundle.js 包含在dist/bundle.js中的 HTML 中dist/index.html ， undefined的错误就会发生。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Title</title>
  <script src="./bundle.js"></script>
</head>
<body>
...
</body>
</html>

Answer 1

One of the main selling points of modules is to give your code an explicit dependency chain, and to avoid global variables.模块的主要卖点之一是为您的代码提供明确的依赖链，并避免使用全局变量。 For variables that you want to be able to access in other modules, you should export them, and import them where they're needed.对于您希望能够在其他模块中访问的变量，您应该export它们，并在需要它们的地方import它们。

export let recorder;
// do stuff
// assign to recorder

and in the other module在另一个模块中

import { recorder } from './theFirstModule';
function recordEnd() {
  recorder.stop();
}

The other (bad) option is to make recorder explicitly global, so it'll be accessible anywhere - but that defeats the purpose of using modules and makes code harder to reason about, so I wouldn't recommend it.另一个（不好的）选项是使recorder显式全局化，因此它可以在任何地方访问 - 但这违背了使用模块的目的并使代码更难推理，所以我不推荐它。

Instead of doing而不是做

var recorder;

, instead, wherever you assign to recorder , assign to window.recorder . ，相反，无论您分配给什么recorder ，都分配给window.recorder 。 (But if I were you I'd really try working within the module system first) （但如果我是你，我真的会先尝试在模块系统中工作）

Javascript - 如何在 webpack 中的两个函数中使用变量？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-01-07 03:28:46

Javascript - 如何在 webpack 中的两个函数中使用变量？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-01-07 03:28:46

解决方案1
1 已采纳 2022-01-07 03:28:46