当执行 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 的日期插件;
评论(0)