Я хочу использовать модуль npm package lodash.debounce в моих статических html-страницах.Я не знал, как этого добиться, поэтому пришлось идти по маршруту веб-пакета.
У меня есть пакет, использующий npm i lodash.debounce в папке npm_modules.
для веб-пакета Я должен предоставить свойкод с использованием вышеуказанного пакета, и он получает компилируется / переносится в bundle.js.Я не хочу делать это каждый раз, когда мне нужно что-то изменить в своем собственном коде.
Есть ли способ просто использовать модуль npm так же, как jquery.Я имею в виду включить файл js с помощью тега script <script src="debounce.js"></script> и использовать в любом html-файле то, как мы используем методы jquery, которые также включаются в глобальное пространство имен window.Jquery.
Мне нужен следующий результат.Пожалуйста, потерпите меня, я новичок в этом.
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<style type="text/css" media="screen">
#btn_submit:disabled {
cursor: not-allowed;
}
#username_loading:after {
content: '';
animation: dots 2s linear infinite;
}
@keyframes dots {
0%, 20% { content: '.' }
40% { content: '..' }
60% { content: '...' }
90%, 100% { content: '' }
</style>
</head>
<body>
<input type="text" id="username" name="username"/>
<br>
<span id="user_msg" style="display: none;">Username already taken</span>
<span id="username_loading" style="display: none;">Checking</span>
<script src="debounce.js"></script>
<script>
let debouncedCheckUsername = debounce(checkUsername, 2000);
$("#username").keyup(function(){
$("#user_msg").hide();
$("#username_loading").slideDown();
$("#btn_submit").prop('disabled', true);
debouncedCheckUsername();
});
function checkUsername() {
let username = $("#username").val();
if(!username) {
$("#username_loading").slideUp();
$("#user_msg").hide();
$("#btn_submit").prop('disabled', false);
return false;
}
$.ajax({
url: 'cfc/tutorService.cfc',
type: 'GET',
dataType: 'json',
data: {
returnAs: 'json',
returnformat: 'json',
method: 'checkUsername',
username: username
}
})
.done(function(data) {
if(data.duplicate) {
$("#username_loading").hide();
$("#user_msg").show();
$("#btn_submit").prop('disabled', true);
} else {
$("#username_loading").slideUp();
$("#user_msg").hide();
$("#btn_submit").prop('disabled', false);
}
})
.fail(function() {
console.log("checkUsername error");
})
.always(function() {
});
}
</script>
</body>
</html>