标签: laravel-mix

我有一个使用Laravel 5.4和Laravel Mix的项目，我有一个图像文件夹，其中一些图像具有相同的名称但类别不同，因此它们包含在不同的目录中。

所以

resources/
  assets/
    images/
      globalimage.png
      versiona/
        image1.png
        image2.png
      versionb/
        image1.png
        image2.png

我需要的是Laravel Mix 中的复制命令来复制这些文件夹以及其中的任何文件，以便我的公共文件夹具有相同的文件夹结构。

我怎样才能做到这一点？

mix.js('resources/assets/backend/js/main.js', 'public/backend/js')
   .js('resources/assets/frontend/js/main.js', 'public/frontend/js')
   .sass('resources/assets/backend/sass/main.scss', 'public/backend/css')
   .sass('resources/assets/frontend/sass/main.scss', 'public/frontend/css')
   .sourceMaps()
   .copy( 'resources/assets/backend/images/**/*', 'public/backend/images/' )
   .copy( 'resources/assets/frontend/images/**/*', 'public/frontend/images/' )
   .version()
   .disableNotifications();

这是我当前的Mix配置文件，我需要更改的部分是那些复制命令

我们webpack.mix在制作应用程序后看到的所有内容如下：

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

我知道如何运行开发和生产构建，但不知道如何自定义它。在这个问题上，我们认为有关编译的例子sass，以css在根据构建类型不同的道路，但我想用工作es6和pug建设将是相似的。

项目结构：

民众

？？？css-prod

资源

? 资产

？？？蠢货

？？？css-dev

我想要：

• 开发执行：来自resources/assets/sasscompile 的文件resources/assets/css-dev，没有丑化，没有串联。
• 生产执行：从resources/assets/sasscompile 到resources/assets/css-prod， uglify 和 concatenate 的文件。

我应该在哪里定义这些设置？

我正在使用 laravel 构建一个 SPA 应用程序，并且主要使用 laravel mix 进行前端文件编译。启动“yarn run hot”后，我想从被监视的服务器端文件（.php）中排除，因为每次我在后端进行更改时，整个页面都会重新加载。甚至，在最新的 Windows 更新之后，对服务器进行简单的 ajax 调用可能会在我的“yarn run hot”控制台中触发“[Browsersync] Reloading Browsers...”事件。

我想排除 .php 文件被 laravel mix 监视会帮助我，但我不知道如何。可能是webpack配置....

提前致谢。

我尝试要求perfect-scrollbar对我的laravel javascript 进行jquery插件。所以我跑了

npm install perfect-scrollbar

在我的Javascript文件的第1行（位于下方ressources/assets/javascript/material-dashboard/myfile.js）中，我需要使用此尝试的插件

require('perfect-scrollbar');

该myscript.js需要的app.js用require('./material-dashboard/myscript.js')

现在浏览器控制台告诉我

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

资产与

npm run dev

内容 myscript.js

require('perfect-scrollbar');

(function() {
  isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;

  if (isWindows) {
    // if we are on windows OS we activate the perfectScrollbar function
    $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

    $('html').addClass('perfect-scrollbar-on');
  } else {
    $('html').addClass('perfect-scrollbar-off');
  }
})();

怎么了？

谢谢你的帮助！

我搜索了又搜索，但在 SO 上找不到我的问题的答案。所以这是我的问题。我正在尝试使用 Laravel Mix 全局加载 jQuery。我已经尝试修改各种文件，但似乎没有任何效果……我仍然收到“$ 未定义”错误。

这是我的代码。

Bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/select2.min.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/admin/app.scss', 'public/css/admin')
   .copy('resources/assets/css/fontawesome.css', 'public/css')
   .copy('resources/assets/css/select2.min.css', 'public/css')
   .copy('resources/assets/webfonts', 'public/webfonts')
   .copy('resources/assets/js/tinymce', 'public/js/tinymce');

mix.browserSync('http://localhost:8000');

我得到的错误：

未捕获的 ReferenceError: $ 未定义

@section('scripts') 中 create.blade.php 内部的代码 …

由于安全原因，我将所有目录和文件移动到一个主目录中，并将所有文件/目录从公共文件夹中取出到 Laravel 项目的根目录。现在我想将npm run devscss 文件编译为 css，将 js 编译为 js。但是，每次我运行npm run dev它时，它都会public在我创建的主文件夹中创建一个名为的文件夹，并将编译后的文件放入其中。但我想把它放在根文件夹中，其中包含：css-js-svg-fonts-index 所以我改变了

这个：

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

对此：

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

但没有结果:(它只是在主文件夹中创建公用文件夹，这不是我希望它上一级的根目录。

谢谢

我正在使用 Laravel Mix，它使用 Webpack 3.6，我正在尝试安装https://atomiks.github.io/tippyjs/。

我的 SCSS 可能通过@import "../../../../node_modules/tippy.js/dist/tippy.css";.

但是，在我的 javascript 文件的顶部，我有这个，但它不起作用：

var $ = require('jquery');
var webcast_helper = require('webcast_helper');
var moment = require('moment');
import tippy from 'tippy.js';

我得到错误： Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

如何以与此 Webpack 方法配合使用的方式导入 Tippy.js？

_{（如何使用 webpack 4 将 tippy.js 导入到 html 页面？显然对我不起作用。）}

我试图在我的 laravel 项目中使用 moment.js，而不是使用 vue，但仍然通过 npm 导入包。

我的 app.js 文件：

require('moment/moment.js');
require('./bootstrap');
require('bootstrap-select');

在我的 webpack.pix.js 文件中看起来像这样：

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

mix.setResourceRoot('laravel/public');

mix.js('resources/js/app.js', 'public/js')
     .combine([
          'resources/theme/dist/js/app.js',
          'resources/theme/dist/js/app.init.js',
          'resources/theme/dist/js/sidebarmenu.js',
          'resources/theme/dist/js/waves.js',
          'resources/theme/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js',    
          'resources/theme/assets/extra-libs/sparkline/sparkline.js',  
          'resources/theme/dist/js/custom.js',
          'resources/js/custom.js'
     ], 'public/js/nice-admin.js')
     .copyDirectory('resources/theme/assets/images/', 'public/assets/images')
     .copyDirectory('resources/theme/dist/css/icons/material-design-iconic-font/fonts', 'public/fonts')
     .copy('node_modules/bootstrap-daterangepicker/daterangepicker.css', 'public/css/daterangepicker.css')
     .copy('node_modules/bootstrap-select/dist/css/bootstrap-select.min.css', 'public/css/bootstrap-select.min.css')
     .sass('resources/sass/app.scss', 'public/css', {
           implementation: require('node-sass')
}).options({processCssUrls: false})

然后在我的 custom.js 文件中，我刚刚得到了这个：

$(function() {
    "use strict";

    let date = moment().format();
    console.log(date);
});

我收到以下错误：

app.js:13202 Uncaught ReferenceError: moment is not defined
    at HTMLDocument.<anonymous> (nice-admin.js:2144)
    at mightThrow (app.js:12909)
    at process (app.js:12977)

我已经验证了那个时刻在我编译的 …

我正在运行Laravel Valet以在本地托管站点，并运行Laravel Mix来编译资产并使用 Webpack 开发服务器执行 HMR

我.dev通过以下方式在本地保护了该站点

valet secure

{{ mix('js/app.js') }} 运行时调用没问题npm run watch

但是每当我想通过运行hotnpm 脚本来利用热重载时，我都会得到这个

GET https://localhost:8080//css/app.css net::ERR_CERT_AUTHORITY_INVALID

GitHub问题建议添加--https 标志，我试过了，也--http

我什至通过--disable-host-check标志禁用了主机检查并清除了所有可能的缓存，甚至尝试了新的git clone但无济于事

这是我的 package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm …

奇怪的问题，但我相信它很容易解决。我已经在一个完全空的 webpack 项目上进行了测试。

它说npm js-cookie有 0 个依赖项，所以我想这应该独立工作。

$ npm install js-cookie --save

然后简单地在我的脚本文件中运行它。

require('js-cookie');

Cookies.set('name', 'value');

节点供应商js-cookie100% 存在并且要求没有错误。

但是只是得到这个错误。

这是一个测试项目，您可以下载并使用npm install，然后npm run production查看错误。

http://dev.joshmoto.wtf/npm-webpack-jscookie-project.zip

我正在使用 laravel mix，但我不明白这会是什么问题？