我如何 link 到 Laravel 5.1 中的 bower 组件
How can I link to bower components in Laravel 5.1
我正在使用 Bower 安装一些依赖项。我遇到的唯一问题是尝试在我的视图中全局加载它们。
我正在尝试这样做:
<script src="{{ URL::asset('bower_components/sweetalert/dist/sweetalert-dev.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('node_modules/sweetalert/dist/weetalert.css') }}">
这导致:
<script src="http://project.dev/bower_components/sweetalert/dist/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://project.dev/node_modules/sweetalert/dist/weetalert.css">
这显然是错误的,因为它在 app
目录之外。如何正确引用库?
<script>
和 <link>
标签只能包含 public 可以访问的文件,即在 public
文件夹中。
由于 bower 和 npm 默认将这些组件安装在 public
文件夹之外,这意味着您必须将需要的组件复制到 public
。
您可以使用 gulp 文件执行此操作:
var bower_path = './bower_components';
var js_path = 'public/js';
mix.copy(bower_path + '/sweetalert/dist/sweetalert-dev.js', js_path);
运行 gulp
然后用
包含在您的视图中
{{ asset("js/sweetalert-dev.js") }}
(如果有缩小版,请复制)
您还可以在顶级文件夹中创建一个 .bowerrc
文件,以指定所有 Bower 组件都应安装在 public
而不是 bower_components
中
{
"directory": "public/bower"
}
我不推荐这样做,因为这会将很多文件暴露给 public(例如,其他人可能会盗链并占用您的带宽)
我正在使用 Bower 安装一些依赖项。我遇到的唯一问题是尝试在我的视图中全局加载它们。
我正在尝试这样做:
<script src="{{ URL::asset('bower_components/sweetalert/dist/sweetalert-dev.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('node_modules/sweetalert/dist/weetalert.css') }}">
这导致:
<script src="http://project.dev/bower_components/sweetalert/dist/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://project.dev/node_modules/sweetalert/dist/weetalert.css">
这显然是错误的,因为它在 app
目录之外。如何正确引用库?
<script>
和 <link>
标签只能包含 public 可以访问的文件,即在 public
文件夹中。
由于 bower 和 npm 默认将这些组件安装在 public
文件夹之外,这意味着您必须将需要的组件复制到 public
。
您可以使用 gulp 文件执行此操作:
var bower_path = './bower_components';
var js_path = 'public/js';
mix.copy(bower_path + '/sweetalert/dist/sweetalert-dev.js', js_path);
运行 gulp
然后用
{{ asset("js/sweetalert-dev.js") }}
(如果有缩小版,请复制)
您还可以在顶级文件夹中创建一个 .bowerrc
文件,以指定所有 Bower 组件都应安装在 public
而不是 bower_components
{
"directory": "public/bower"
}
我不推荐这样做,因为这会将很多文件暴露给 public(例如,其他人可能会盗链并占用您的带宽)