![](/img/trans.png)
[英]How can I make use of a JavaScript variable across two separate functions?
[英]Javascript - How to use a variable across two functions in webpack?
我必须将带有普通 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
object 上抛出undefined
的错误,就好像该变量根本没有被recordStart
function 触及一样。
我在这里做错了什么吗? 我刚刚学习了一周的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/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>
模块的主要卖点之一是为您的代码提供明确的依赖链,并避免使用全局变量。 对于您希望能够在其他模块中访问的变量,您应该export
它们,并在需要它们的地方import
它们。
export let recorder;
// do stuff
// assign to recorder
在另一个模块中
import { recorder } from './theFirstModule';
function recordEnd() {
recorder.stop();
}
另一个(不好的)选项是使recorder
显式全局化,因此它可以在任何地方访问 - 但这违背了使用模块的目的并使代码更难推理,所以我不推荐它。
而不是做
var recorder;
,相反,无论您分配给什么recorder
,都分配给window.recorder
。 (但如果我是你,我真的会先尝试在模块系统中工作)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.