如何引入一个新的 JS 文件到 public/JS 下 (已解决)
我想在项目中增加播放视频,用 百度官方推出的用于开发网页播放器 cyberplayer,已注册帐号。
首先我在resourses/js/目录下,增加 cyberplayer.js
然后:
在 require('./bootstrap'); 后面 添加:
require('./cyberplayer');
编译之后,查看public/js/app.js 中是有:
/***/ "./resources/js/cyberplayer.js":
/*!*************************************!*\
!*** ./resources/js/cyberplayer.js ***!
\*************************************/
/*! no static exports found */
.
.
.
然后在相应的页面:play.blade.php中
@section('scripts')
<script type="text/javascript">
var filepath = "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4"; // 百度mp4示例
var fileimage = "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.jpg"; // 百度mp4示例预览图
// var filepath = "{{$live->stream->stream_name}}";
// var fileimage = "{{$live->cover_url}}"; // 百度mp4示例预览图
var player = cyberplayer("playercontainer").setup({
width: 680, // 宽度,也可以支持百分比(不过父元素宽度要有)
height: 448, // 高度,也可以支持百分比
title: "直播中", // 标题
file: filepath,
image: fileimage,
autostart: false, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 100, // 音量
controls: true, // controlbar是否显示
starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
logo: { // logo设置
linktarget: "_blank",
margin: 8,
hide: false,
position: "top-right", // 位置
file: "" // 图片地址
},
ak: "**********" // 公有云平台注册即可获得accessKey
});
</script>
@stop
但是不能播放。报错是,找不到。
如果我手动在public/js下,添加 cyberplayer.js,再把js文件单独引入:<script src="{{ asset('js/cyberplayer.js') }}"></script>
就可以显示视频播放了。
但手动拷贝似乎不对。
原来,只要修改:webpack.min.js文件,为
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/cyberplayer.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').version();
然后,再更新 Webpack 。
执行命令:npm run watch-poll
resources/js下面的 cyberplay.js 就自动复制到 public/js下了。
本来想在论坛上提问的,现在解决了,分享给后面的同学。