标签: laravel-mix

我将在我的 laravel 项目中安装此管理面板https://coreui.io/（免费版本）。它包含一个具有以下依赖项的 package.json 文件：

    "dependencies": {
    "@coreui/coreui": "^2.1.5",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
    "@coreui/icons": "0.3.0",
    "bootstrap": "^4.2.1",
    "chart.js": "2.7.3",
    "core-js": "^2.6.1",
    "flag-icon-css": "^3.2.1",
    "font-awesome": "4.7.0",
    "jquery": "3.3.1",
    "pace-progress": "1.0.2",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.14.6",
    "simple-line-icons": "2.4.1"
  },

因此，我将把这些依赖项放入我的 package.json 中并运行 npm install和npm run dev。我的项目的packaje.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 …

我有两个不同的 server.js 和 client.js 入口点。（我使用的是 vue-server-renderer 和 laravel-mix）-（我的 server.js 和 client.js 看起来与这里描述的完全一样-spatie/laravel-服务器端渲染，如果我进行静态导出，import Test from '../views/Test'它就可以工作..

如果我尝试在没有延迟加载的情况下导入路由，SSR 可以工作：

import Test from "../views/Test";

export const routes = [{
    path: '/my-route',
    name: "Test",  
    component: Test,
}]

但是如果我尝试延迟加载，它会在 SSR 上失败：

export const routes = [{
    path: '/my-route',
    name: "Test"
    component: () => import('../views/Test.vue'),
}]

找不到模块“./js/chunks/server/0.js?id=c3384f174123f0848451”

对于() => import('../views/Home.vue), client.js 有效，只有 server.js 无效。

我的server.js：

import renderVueComponentToString from 'vue-server-renderer/basic';
import app from './app';
import {router} from './router/index';

new …

当我运行时，我在不使用 .extract 和 import() 的情况下获得了空的 .css 文件 npm run dev

我的 webpack.mix.js：

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
    .js('resources/assets/js/admin.js', 'public/js').sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css');

mix.copyDirectory('resources/assets/img', 'public/img');

奇怪的是，如果我删除 .js 混合文件之一，它会起作用。例如这有效：

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

这也有效：

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

但在那之后我需要生成 admin.js（或 app.js）。这不是很方便。任何想法我做错了什么？

我的环境是：

• Laravel 混合版本：5.0.0
• 节点版本：11.0.0
• NPM 版本：6.10.3
• 操作系统：macOS High Siera / Ubuntu 18.04 LTS

我确定我没有动态导入，因为我是从 laravel-mix v.3 升级的。但我也检查了我的代码。如果我有动态导入，我的示例都不会起作用。

编辑：我发现问题出在我导入的 admin.js 文件中：

import router from './router'

在 /router/index.js 中有另一个导入：

import routes from './routes.js'

问题 se?ms 在 routes.js …

使用 Laravel Mix，是否可以使用一个命令查看两个 Webpack 配置文件，以便对任何底层文件的更改立即导致必要的文件被编译？

具体来说，我有以下两个与 Laravel Mix 一起使用的 Webpack 配置文件：webpack.css.mix.js和webpack.js.mix.js

scripts然后我在的对象中有以下命令package.json：

"development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
"development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
"watch": "npm run development-css -- --watch & npm run development-js -- --watch",

该npm run watch命令仅监视指定的第一个命令。在上述情况下，我保存到 Sass 文件的任何更改都会构建，但不会更改任何 JS/Vue 文件。如果我在命令中切换这两个命令watch，那么 JS 将基于更改/保存构建，而不是 Sass。

有谁知道如何构造命令npm run watch（或底层命令），以便我可以同时观看 Sass 和 JS？

另外，值得一提的是，由于目前 Laravel Mix 中的一个错误，我不得不将 Sass 和 JS 编译分成两个单独的文件。此错误记录在此处：https ://github.com/JeffreyWay/laravel-mix/issues/1914 …

我在 turbolinks 设置方面遇到了一些问题。这是设置：Laravel Mix - 默认值：bootstrap，jquery，..）。就在 bootstrap.js 文件之后，我包含了 turbolinks。一切正常，直到页面重新加载 - 我总是出错。我究竟做错了什么？

错误：

app.js:1282 Uncaught TypeError: $ is not a function
    at HTMLDocument.<anonymous> (app.js:1282)
    at Object.push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (vendor.js:105933)
    at r.notifyApplicationAfterPageLoad (vendor.js:105934)
    at r.visitCompleted (vendor.js:105934)
    at r.complete (vendor.js:105933)
    at r.<anonymous> (vendor.js:105933)
    at vendor.js:105933

有错误的行：

document.addEventListener('turbolinks:load',function() {
    new SimpleBar(document.getElementsByClassName("js-simplebar")[0]);
    $(".sidebar-toggle").on("click", function() {
        //...
    });
});

编辑这里是 js 包括（编译 - Laravel Mix）

<head>
<script defer src="/js/manifest.js" data-turbolinks-track="true"></script>
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
<script defer src="/js/app.js" data-turbolinks-track="true"></script>
</head>

这是我的 app.js：

require('./bootstrap');
let Turbolinks = require('turbolinks'); …

我已经使用 npm 安装了 Fullcalendar 库包。

npm i --save @fullcalendar/core 
    @fullcalendar/interaction @fullcalendar/daygrid 
    @fullcalendar/timegrid @fullcalendar/list @fullcalendar/bootstrap

我也将它包含在 app.js 中。

require('@fullcalendar/core');
require('@fullcalendar/bootstrap');
require('@fullcalendar/list');
require('@fullcalendar/timegrid');
require('@fullcalendar/daygrid');
require('@fullcalendar/interaction');

但是，当尝试使用以下代码创建日历时：

var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
    plugins: [ 'interactionPlugin', 'bootstrapPlugin', 'dayGridPlugin', 'timeGridPlugin', 'listPlugin'],
});

我收到错误...

Uncaught ReferenceError: Calendar is not defined at HTMLDocument.<anonymous> 在 new Calendar

.

我究竟做错了什么？

我的 webpack.mix.js 看起来像这样：

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

编辑：

将我的 app.js 设置为：

window.FullCalendar = require('@fullcalendar/core');
window.bootstrapPlugin = require('@fullcalendar/bootstrap');
window.interactionPlugin = require('@fullcalendar/interaction');
window.listPlugin …

我将 jetstream+inertia.js 安装到我的 Laravel 项目中，一切正常，但我只需要在welcome. vue组件中使用 bootstrap 5，那么我该如何处理呢？

我的app.js档案；

require('./bootstrap');

// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';



const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({methods: {route}})
    .use(InertiaPlugin)
    .use(Toaster)
    .mount(el);

我的app.css文件：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

我正在使用 Vue2 和 laravel-mix，我希望我的变量可以全局访问。我最终发现了这个：

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader:  'sass-loader',
                        options: {
                            //this might be "data" or "prependData" depening on your version
                            additionalData: `@import "./resources/js/styles/variables.scss";`
                        }
                    }
                ]
            }
        ]
    }
})

这确实使我的变量可以全局访问，但本质上是将其复制variables.scss到每个 vue 组件中，这极大地膨胀了我的包大小。

我怎样才能防止这种情况发生？

编辑：当导入的文件相对较大时，这只是一个问题。在我的项目中，导入的文件本身导入了一个主题 scss（以访问主题变量），它最终将整个内容复制到我需要变量的任何地方。
我通过在单独的文件中定义自定义变量并在“覆盖变量”文件中使用这些变量来解决此问题，如下所示：
custom-variables.scss

$red: #ff0000;

覆盖变量.scss

import 'theme.scss'; //this bloated my project
import 'custom-variables';

$--theme-red: $red

当我在 vue 组件中需要这种主题颜色时，我只是导入了而custom-variables.scss不是overwriting-variables.scss.
这确实解决了我的膨胀问题，但并没有完全解决问题，custom-variables.scss我的项目中仍然有多个实例，这并不重要，因为它真的很小。所以我仍然很高兴听到其他解决方案！

我最近尝试运行npm run dev和npm run watch，但在编译 80% 后出现错误。我尝试使用谷歌搜索它，但没有找到解决方案。下面是我在控制台中得到的错误。

./resources/sass/frontend/app.scss 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/css- loader/dist/cjs.js): ValidationError: 无效的选项对象。CSS Loader 已使用与 AP I 架构不匹配的选项对象进行初始化。

• options.url 应该是以下之一：boolean | 对象{过滤器？} -> 允许启用/禁用url()/image-set()功能处理。-> 在https://github.com/webpack-contrib/css-loader#url阅读更多 详情：
  • options.url 应该是一个布尔值。
  • options.url 应该是一个对象： object { filter? 在验证 (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) 在 Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib \NormalModule.js:527:19) 在 Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27) 在 processResult (E:\Web Projects\project\node_modules \webpack\lib\NormalModule.js:701:19) 在 E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5 在 E:\Web Projects\project\node_modules\loader-runner\ lib\LoaderRunner.js:399:11 在 E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18

webpack.mix.js

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

mix.setPublicPath('public')
    .setResourceRoot('../')
    .vue()
    .sass('resources/sass/frontend/app.scss', …

所以我目前正在尝试使用此软件包设置 Monaco 编辑器： https: //github.com/egoist/vue-monaco

除了一条错误消息之外，它工作得很好：

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq

You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker

现在我知道你需要启动一个工作人员，但是，我似乎无法让它正常工作。

我一直在使用 Laravel 和 Laravel Mix 来让这一切正常工作，但是似乎没有关于如何设置工作人员的文档。

任何帮助，将不胜感激。