脚本文件包含在Laravel 5.3中

Question

如何在laravel 5.3中包括vue.js和app.js之类的脚本文件？有什么特殊的方法包括它们吗？我包括下面的它们。

<script src="http://127.0.0.1/addbook/node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>

Answer 1

正如其他答案所建议的，您应该首先阅读Laravel elixir的DOC，使用它，我们可以简单地编写5行配置，并立即获得光滑的前端开发体验，其中包括用于资产包装的webpack，将ES6代码转换为ES5的babel，以及用于文件观察的browser-sync和多设备同步的浏览器自动刷新。

在长生不老药的顶部，这是我关注的一些实践：

• 在您的layouts/app.blade.php中包括一个通用的app.js，其中包括您是绝对的代码，请确保您想要在每个页面中。例如我将$('.datetime').datetimepicker(...)放入其中，因此bootstrap DateTime Picker插件在我将.datetime放在HTML中的任何位置。
• 对于您在NPM中导入的那些库中，import在特定视图的JS文件中它们，以便WebPack将您的代码与您所包含的库一起编译您的代码。您可以Vue = require('vue');或import Vue from 'vue';，后者不受node.js或任何浏览器的支持，但Babel为我们进行了babel。
• 现在，您有一个特定的视图，例如login.blade.php，它是@extends app.blade.php布局。我们还知道，最好的做法是将脚本文件放在HTML的body的底部，以免阻止DOM解析和资源下载。我个人在login.blade.php中使用Laravel blade的语法

---

@push('childJS')
<script src='/js/login.js'></script>
@endpush

和app.blade.php：

    <script src='/js/app.js'></script>
    @stack('childJS')
</body>

因此，两个JS文件都出现在body的底部，以获得最佳性能，而app.js总是出现在login.js之前，以便很好地解决了JS文件之间的速度。

Answer 2

您应该为此使用资产，甚至应该使用资产，甚至应该使用node_modules进入公共目录，只需复制您要通过Laravel Elixir