Laravel 使用 npm 安装前端依赖;
npm 是一个类似 composer 的工具;
用于管理前端的各种依赖包;
在使用之前需要先安装 node ;
Windows 下可以在官网下载安装: https://nodejs.org/zh-cn
Mac 上可以通过 brew 安装;
node 已经捆绑了 npm 不需要单独安装 npm 了;
但是因为那堵墙的原因还需要设置淘宝的 npm 镜像;
然后就可以执行安装命令了;
在 Laravel 项目根目录下有一个类似 composer.json 的 package.json 文件;
当执行 npm install
的时候就和 composer install
一样;
安装完成后会生成 package-lock.json 文件;
想下 composer.lock 就能知道 package-lock.json 的作用了;
package.json 中的 scripts 和 composer.json 中的 script 作用也类似;
比如说上面的 dev script 就可以通过下面这种方式运行:
在开发中常用下面这 3 个命令;
| 命令 | 作用 |
| dev | 编译、合并 |
| prod | 编译、合并、压缩 |
| watch | 自动监听文件变动进行编译、合并 |
这些 script 都是依赖 webpack 来打包压缩合并;
webpack 的配置对后端开发人员来说有那么一点不直观;
Laravel 官方又提供了 laravel-mix 来简化 webpack ;
在 Laravel 项目根目录中的 webpack.mix.js 就是 webpack 的配置文件;
这里面分别定义了前端资源的源文件和处理后的目标文件路径;
| 处理前的源文件 | 处理后的文件目录 |
| resources/assets/js/app.js | public/js |
| resources/assets/sass/app.scss | public/css |
默认情况下 resources/assets/js/app.js 中引入了 bootstrap.js 和 vue.js ;
这里示例先只保留 bootstrap.js ;
resources/assets/js/app.js
当我们想使用某个前端插件的时候我们可以去 https://npmjs.com 上搜索;
这一步又跟 composer 的 https://packagist.org 一毛一样;
掌握了 composer 的使用后再看 npm 也是可以很快入手的;
比如说我们想找一个 bootstrap 的日期插件;
安装插件;
然后引入 css 文件;
resources/assets/sass/app.scss
引入 css 文件使用的是 import
;
路径可以点开 node_modules 目录查看;
除了引用 node_modules 目录下的文件还可以引用自己创建的文件;
比如说创建一个 resources/assets/js/bootstrap-datepicker.js 文件;
引入 js 文件使用的是 require
;
在 resources/assets/js/app.js 中引入 bootstrap-datepicker ;
编译合并压缩:
创建示例路由 routes/web.php ;
创建视图文件 resources/views/mix/view.blade.php ;
这里使用 asset()
函数生成资源链接;
一个日期插件就这样完成了;
查看源代码可以发现所有的 css 和 js 内容都合并成了 app.css 和 app.js;
但是现在还不完美;
因为当我们改动文件后容易因为缓存不能及时加载新的 css 和 js ;
常见的做法是给 css 和 js 加个版本号;
这在 Laravel 也很容易实现;
只需要在 webpack.mix.js 中使用 version()
;
webpack.mix.js
视图文件中把 asset()
换成 mix()
即可;
resources/views/mix/view.blade.php