laravel 使用npm下包的问题

Question

刚从thinkphp5 转到laravel。遇到一些问题。

过去thinkphp做项目时前端包管理使用的是bower,直接放到public目录下,需要引用时直接script src引入就行.

现在laravel中下载前端包使用npm，放到目录node_modules目录,使用的blade模板文件在resources目录

举个实际的案例,例如用npm 下载一个富文本编辑器 wangEditor,我如何在index.blade.php 中使用它?

Answer 1

可以在 node_modules 下对应的包目录找到已经构建好的js文件，然后复制到public目录下使用。也可以去包的官网或者git下载构建好的包。

Answer 2

这个关系到 laravel-mix 将前端文件编译后引入的问题
1、在laravel项目目录下的 webpack.mix.js 文件中可看到 mix.js('resources/js/app.js', 'public/js')，意思是mix会将：resources/js/app.js 编译，在 public/js 下生成 app.js文件

2、所以要想引入 npm安装的包，得在 resources/js/app.js 中引入：
window._ = require('wangEditor'); //全局引入
或者 var wangEditor = require('wangEditor')
conlog.log(wangEditor); //在控制台查看是否引入成功
ps:
require() 会到 node_modules/ 下去找 wangEditor包，然后找到 wangEditor/package.json 中的 main 参数的值指向的路径，加载该文件；
这就是正确引入 npm安装包的方式

3、在 index.blade.php 模板中引入 mix编译后的文件 public/js/app.js：
<script src="{{ asset('js/app.js') }}" defer></script>

4、开启实时编译：
npm run watch

编译完成后，就能在浏览器的控制台查看到了