HTML + Laravel + npm + package.json 工作流程答案

【问题标题】：HTML + Laravel + npm + package.json workflowHTML + Laravel + npm + package.json 工作流程
【发布时间】：2017-02-23 20:09:25
【问题描述】：

我想知道如何将我的 npm 包包含到我的 HTML 中。我已将 "slidebars": "2.0.2" 添加到我的 package.json 中。之后，我运行了 npm install。到现在为止还挺好。

现在，我是 Laravel 和 npm 的新手。我正在尝试像这样使用 Laravel 中提供的“混合”功能：

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .version();

这是否会自动将 package.json 中提供的所有包编译成单个 app.js + app.css？还是我需要手动从 slidebars-plugin 导入 CSS + JS，例如：<link href="/node_modules/slidebars/dist/slidebars.css" rel="stylesheet">？

【问题讨论】：

标签： laravel npm

【解决方案1】：

对于 css，最简单的方法是将 css 文件复制到 resources/assets/，然后将其链接到 app.scss，如下所示：

@import "package.scss"

至于JS，你可以将你的vendor JS文件合并为一个，然后像这样复制到公共目录

mix.js([
    'node_modules/package/dist/package.min.js',
    'node_modules/package2/dist/package2.min.js',
    'node_modules/package3/dist/package3.min.js',
], 'public/js/vendors.js');

那么在你看来，你只需要包含/js/vendors.js

【讨论】：

感谢您的回答！我尝试添加 @import "node_modules/slidebars/dist/slidebars.css";但是“npm run dev”向我抛出了这个错误：pastebin.com/HeFwUdtk
你没有像我说的那样复制。 app.scss 文件位于resources/assets/sass/，请将您的文件移到那里或手动引用 node_modules ../../../node_modules...
我认为不复制资产更干净。但是添加“../../../”修复了它。谢谢。虽然，如何在没有找到根路径的情况下导入引导程序？这似乎是成功的：@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
如果有帮助，您可以标记我的答案。谢谢:)
经过进一步测试，这个答案的 JS 部分似乎不起作用。请看这里：stackoverflow.com/questions/42428025/…