标签: laravel-mix

我是 Laravel Mix 的新手，我无法添加 jquery 库 stellar，当我尝试npm run dev时，它向我显示此错误：未找到此依赖项：* jquery.stellar in ./resources/assets/js/bootstrap. js

但我已经使用npm install --save jquery.stellar或npm install jquery.stellar安装了它

这是我的 webpack 文件：webpack.mix.js：

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files. …

I'm using Webpack 2 (via Laravel Mix) to compile a Javascript asset in different languages, much like Webpack's own i18n plugin. I've built a custom implementation, though, which plays nicely with Mix's helpers. There is one final issue, though, which I cannot wrap my head around, which has to do with the watch process. Here's a summary of what is happening:

• An app.js file has several dependencies which compose the actual logic
• Mix is instructed to create a different …

我有一个大型 Stylus 项目，需要从 vanilla Gulp 移植到 Laravel Mix 中。

其中app.styl包括另一个来自node_modules 的framework.styl内容@import。我无法在 Laravel Mix 中使用use和import标志（或者至少我不知道如何使用），因为

1. 对于某些依赖项，我只需要导入 node_modules 文件夹中的特定文件，而不是整个文件
2. 对于一个依赖项，我需要在导入 Stylus之前在其内部设置一长串变量。

主样式

@import "includes/framework.styl"

/* Other stuff */

包括/framework.styl

$variable = 1.5
$other = white
/* bunch more */

@import "jeet"
@import "foo/src/specific.styl"

ks-no-conflict = true
@import "kouto-swiss"

/* other stuff */

@import中的所有s 都framework.styl来自node_modules。这些依赖项和文件的加载顺序很重要，因为如果加载顺序错误，它们可能会相互冲突。

但是，当我运行时npm run dev，它抱怨无法在 中找到任何依赖项位置framework.styl。

我尝试@import在路径前加上~/, node_modules/ …

我无法真正让我的 js 库工作，前段时间我决定为我使用的每个库都有一个单独的 js 文件（所以我的布局中包含一个 jquery.js 文件和一个 bootstrap.js 文件），一切工作得很好，直到我不得不将 jquery-ui 添加到这种混乱中，并收到此错误

Uncaught TypeError: $(...).slider is not a function

直到我在同一个文件中加载 jquery 和 jquery-ui 。问题是我不想在包含 jquery 的所有地方都包含 jquery ui ，因为我只在 2 个页面中使用它。下面我将放置我的代码：

jquery-ui.slider.js：

require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');

应用程序.js：

window.$ = window.jQuery = require('jquery');
require('./bootstrap');

webpack.mix.js：

mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');

我正在使用以下 npm 模块：

• 引导程序-sass
• jQuery
• jquery-ui

我已经把头撞到墙上了。

对于我的项目，我希望 Laravel Mix/webpack 将一个.scss文件编译成两个文件，一个常规的、未缩小的（扩展或嵌套）.css文件和一个缩小的（压缩）.min.css文件，所以我基本上拥有这两个文件。

我尝试过：

mix.sass('src', 'output')
   .copy('output.css', 'output.min.css')
   .minify('output.min.css');

但是，这会导致错误，因为该.css文件未编译。

我知道 Laravel Mix 在运行时会缩小npm run production，但我对两个文件感兴趣，而不仅仅是production编译的文件。

有什么办法可以做到这一点，而不修改整个 webpack 配置吗？

我正在使用 Laravel 5.4 和 mix 来版本化我的 javascript 和 scss 文件。问题是：它不会清除以前构建的文件，只是添加一个具有不同文件名的新文件，即app.9d3e179e85922aad6ccf.js

在我开始的一个新项目中，我没有这个问题。Mix 正确地用最新构建的版本替换旧文件。

有什么地方我可以做出改变吗？

我使用 Vuejs 构建了一个浏览器插件，并使用 Laravel Mix 作为我的构建过程。

我的所有 vue 模板都在单个文件组件中，一切都工作得很好...直到我从插件清单中的 CSP 中删除“unsafe-eval”。火狐浏览器显示错误：

Content Security Policy: The page's settings blocked the loading of a resource...Source: call to eval() or related function blocked by CSP.

Laravel Mix 使用 webpack 和 vue-loader，我的印象是它创建的包是 CSP 兼容的。

我查看了构建的 JS，似乎没有调用，eval()但我认为有一个new Function()调用导致了问题。

我在这里缺少一些简单的东西吗？

某些东西使我的开箱即用的 Laravel 项目能够在浏览器同步页面上无限加载browser-sync。browser-sync-webpack-plugin它在 上运行良好http://localhost，但浏览器同步（localhost：3000）版本不会停止加载并且不显示任何内容，仅显示一个白色页面。

我发现这个问题与我的相似，但没有任何答案。

这只是最近才开始发生在我的机器上。起初我以为这是因为防病毒软件或防火墙的原因，但禁用它们并没有什么好处。我什至不知道是什么导致页面无法加载。

我的webpack.mix.js文件如下所示：

mix.js('resources/assets/js/script.js', 'public/js')
.sass('resources/assets/sass/main.scss', 'public/css')
.disableNotifications()
.browserSync();

编辑：任何有关缩小问题范围的提示也将不胜感激。

我需要一种方法使用 Laravel Mix 将文件夹中的每个 JS 文件编译为另一个文件作为单独的文件。

node_modules文件夹的大小相当大。我想知道 Laravel Mix 编译完所有内容后是否可以删除它？当然，我之前尝试过（安装jquery），然后在 Laravel Mix 编译完所有内容后删除 node_modules 文件夹。我的jquery代码仍在运行，没有任何错误。那么可以吗？