The problem of using npm package for laravel

just transferred from thinkphp5 to laravel. There are some problems.

in the past, when thinkphp did projects, the front-end package management used bower, to put directly into the public directory, and script src directly introduced when references were needed.

now download the front-end package in laravel and use npm, to put it in the directory node_modules directory, and the blade template files used are located in the resources directory

give an actual case, such as downloading a rich text editor wangEditor, with npm. How can I use it in index.blade.php?

Dec.22,2021

you can find the built js file in the corresponding package directory under node_modules, and then copy it to the public directory to use. You can also go to the package's official website or git to download the built package.

this is related to the problem of laravel-mix introducing the front-end file after compilation
1. You can see mix.js ('resources/js/app.js',' public/js') in the webpack.mix.js file under the laravel project directory, which means that mix compiles: resources/js/app.js. Generate the app.js file

2 under public/js, so if you want to introduce the package installed by npm, you have to introduce it in resources/js/app.js:
window._ = require ('wangEditor'); / / globally introduce
or var wangEditor = require ('wangEditor')
conlog.log (wangEditor); / / check whether it has been successfully introduced in the console
ps:
require () will go to node_modules/ to find the wangEditor package, then find the path pointed to by the value of the main parameter in wangEditor/package.json, and load the file.
this is the correct way to introduce the npm installation package

3, to introduce the mix compiled file public/js/app.js:
< script src= "{asset ('js/app.js')}}" defer > < / script >

4 in the index.blade.php template, and to enable real-time compilation:
npm run watch

after compilation is completed, you can see

on the browser console.

Previous: The Vue.js routing switch page is abnormal and the component cannot be refreshed normally.

Next: Nodejs built his own scaffolding. Action was not executed in commander.