将 NPM package 添加到 Laravel 9 项目的正确方法是什么？

Question

Laravel Mix介绍自己为

Webpack 的优雅包装，适用于 80% 的用例。

我相信我有一个广泛的用例，我想知道 80% 是否涵盖了这个以及如何正确地做到这一点。 它可以是任何其他 package，但我以editor.md为例。 他们希望您使用npm i editor.md安装它，然后像下面这样使用它。

<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>

现在我想知道如何正确设置以下路径。

1. editor.md/css/editormd.min.css
2. jquery.min.js（不是依赖）
3. editor.md/editormd.min.js
4. 编辑器.md/lib/

我的想法/问题：

我可以使用 Mix 复制 CSS 和 JS 文件。

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");

但后来我错过了 lib 文件夹中的所有文件（第 4 个路径）。 我也可以复制这个文件夹。 我可以将整个node_modules/editor.md文件夹复制到我的资产文件夹中，但这感觉太多了。 最后，jQuery 来自哪里？ 我是否从 CDN 添加它？ 我要安装 npm package 吗？ 同样，我看到解决方案需要app.js文件中的所有内容。

如何以正确的方式做到这一点？

Answer 1

对于 Laravel Mix，正确的实现方法是运行以下命令。

npm i editor.md jquery

然后在 bootstrap.js 文件中添加你的require()方法。

资源/js/bootstrap.js

window._ = require('lodash');

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

在您的模板中，可能位于/resources/views/layouts/app.blade.php ，您需要在文件底部的结束</body>标记之前添加以下内容。

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

Answer 2

这可能不是最好的方法，但是您可以使用mix.copyDirectory(srcDir, destDir)复制整个目录，如此处所示