![](/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.