Laravel Mix introduces itself as

An elegant wrapper around Webpack for the 80% use case.

I believe I have a widespread use case, and I want to know if the 80% covers this and how to do it right. It could be any other package, but I have editor.md as an example. They want you to install it with npm i editor.md and use it like the following.

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

Now I want to know how to get the following paths right.

1. editor.md/css/editormd.min.css
2. jquery.min.js (not a dependency)
3. editor.md/editormd.min.js
4. editor.md/lib/

My ideas/questions:

I could copy the CSS and JS files with Mix.

mix.copy("node_modules/editor.md/css/editormd.min.css", "public/css/editormd.min.css");
mix.copy("node_modules/editor.md/editormd.min.js", "public/js/editormd.min.js");

But then I miss all the files from the lib folder (4th path). I could copy this folder as well. I could copy the entire node_modules/editor.md folder to my assets folder, but this feels too much. And finally, where is jQuery coming from? Do I add it from a CDN? Do I install the npm package? Again, I saw solutions requiring everything in the app.js file.

How to do it the right way?

CodePudding user response：

This may not be the best way to do it, but you could copy the entire directory with mix.copyDirectory(srcDir, destDir) as seen here

CodePudding user response：

For Laravel Mix, the correct way to implement this is first you want to run the following.

npm i editor.md

And then add your require() methods in the bootstrap.js file.

bootstrap.js

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    window.editormd = require('editor.md');
} catch (exception) {
    console.error(exception);
}

In your template, likely at /resources/views/layouts/app.blade.php, you will need to add...

<script src="{{ mix('js/app.js') }}"></script>

At the bottom of the file before the closing </body> tag.