laravel 从 node_modules 中的包中混合编译资产？

Question

I started using laravel-mix on my new Laravel 5.7 project to compile all the js/css into one file, which will appear in my public js/css directory (one for each page) like this:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .js('resources/js/create.member.js', 'public/js/backend/members')
   .sass('resources/sass/create.member.scss', 'public/css/backend/members')
   .sourceMaps();

Like this I want to keep the views tidy and reduce the number of assets that have to be loaded.

Everything fine so far and I understand how to work with laravel-mix. Now I installed some packages, specifically cropperjs and summernote, via npm, to my node_modules directory.

It fails when I import/require their scss/js to the scripts which are going to be compiled and placed in public by laravel-mix because it seems that these scripts (cropper.js, summernote.scss, etc...) are referencing to other assets across their origin package directory within the node_modules directory (fonts, images, etc...)

For JS I do:

require('../../node_modules/cropperjs/dist/cropper.js');
require('../../node_modules/summernote/dist/summernote.js');

Fors SCSS I do:

@import '~cropperjs/src/css/cropper';
@import '~summernote/src/less/summernote-bs4';

My question is: What is good practice when using packages, installed with npm?

Do I have to put the whole package directory to my public directory? Do I link to the assets in the package directory which is located in the node_modules directory? Or is their any chance left to compile them together with my other assets via laravel-mix/webpack, maybe a flag I'm missing or so? Do I have to use any additional software like bower to make things happen?

Answer 1

For js I just use

import 'vue'
import 'cropperjs'

Usually the package documentation will tell you how to import it.

Answer 2

你不应该在 webpack.mix 中编译节点资产......就像 barghouthi 说的，通常包文档会告诉你如何在你的 js 文件中导入包。