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

【问题标题】：Javascript - How to use a variable across two functions in webpack?Javascript - 如何在 webpack 中的两个函数中使用变量？
【发布时间】：2022-01-07 03:22:06
【问题描述】：

我必须将带有纯 JS 文件的旧纯 HTML 迁移到 webpack，但是当我在函数外部声明一个变量并在它们下面的多个函数之间使用时，我遇到了麻烦。

其中一个例子：

// 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();
})

但是，每次调用 recordEnd 时，JS 控制台总是在 recorder 对象上抛出 undefined 错误，就好像 recordStart 函数根本没有触及该变量一样。

我在这里做错了什么吗？我刚学了一周webpack，所以如果这是一个菜鸟的错误，请多多包涵。

PS。 jQuery 运行良好，如果我在其中运行 console.log()，它们会正常触发。

编辑：我忘了提到这个问题只有在我使用此配置运行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"}
      ]
    })
  ]
};

在我迁移到 webpack 之前它运行良好，但在我与它捆绑并在dist/index.html 的 HTML 中包含 dist/bundle.js 之后，就会发生 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>

【问题讨论】：

而不仅仅是var recorder;，你为什么不声明var recorder = new MediaRecorder(...);？这应该确保它始终被定义。
如果所有内容都在同一个文件中，我认为这与 webpack 没有任何关系。一旦我清理你的代码以实际运行，它似乎工作正常：codesandbox.io/s/musing-river-ho0di?file=/src/index.js 你能提供一个minimal reproducible example 来显示你遇到的问题吗？
你试过在调试器中运行这个吗？
@AlexWayne 我为这个问题添加了一些上下文，抱歉我忘记了细节。

标签： javascript webpack

【解决方案1】：

模块的主要卖点之一是为您的代码提供明确的依赖链，并避免使用全局变量。对于您希望能够在其他模块中访问的变量，您应该 export 它们，并在需要它们的地方 import 它们。

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

在另一个模块中

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

另一个（不好的）选项是使recorder 显式全局化，这样它就可以在任何地方访问——但这违背了使用模块的目的，并使代码更难推理，所以我不推荐它。

而不是做

var recorder;

相反，无论您分配给recorder，还是分配给window.recorder。（但如果我是你，我真的会先尝试在模块系统中工作）

【讨论】：

它就像魅力一样！原来我必须一一导出变量，而不是使用module.exports = {}。感谢您提供示例！