拉拉维尔。 webpack.mix.php 是运行 Javascript 的唯一方法吗？

Question

我试图向文本区域添加一个简单的字符数，但我花了一天的时间才让它工作。我想发布我学到的东西，并要求任何有帮助的用户澄清。

在我将脚本上传到 ProjectRoot/resources/js/app.js 之前，Laravel 没有运行 javascript。

var maxLength = 100;
$('textarea').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $('#chars').text(length);
});

一旦代码出现，我就运行 npm run dev（我已经在这个节点上安装了 npm），然后才运行了 javascript。代码被传输到 ProjectRoot/public/js/app.js 目录中的 app.js 文件（这是一个我找不到我的代码的大文件）目录。我假设，如果我错了，请纠正我，这意味着 npm run dev "converts" /"transfers" /"compiles" （这里的正确词是什么？） javascript 到 laravel webmix 系统。这就是我的知识和解决问题的能力耗尽的地方。

this 和 this 之类的文章听起来像是我可以将 javascript 放入任何 xxx.blade.php 文件中。其他一些不起作用的角度：

• 在 public/js 目录中导入 .js 文件。不走运。
• <script src="{{asset('js/count.js')}}"></script> 在 app.blade.php 或带有文本区域的刀片文件中尝试时不起作用。
• 包括*@section('script')* 也不起作用。

我在 chrome 检查器控制台中遇到了经典的 Uncaught ReferenceError: $ is not defined，但倒计时有效，所以我不确定发生了什么。

我可以在我的 xxx.blade.php 中使用 Laravel 运行 javascript inline 吗？

Answer 1

在您要使用脚本的刀片文件中：

@push('js')
<script>
var maxLength = 100;
$('textarea').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $('#chars').text(length);
});
</script>
@endpush

在您的 app.blade.php（包含所有 js/css 文件的主刀片）中

@stack('js')