了解Laravel Mix

我目前正在将我的一个网站迁移到Laravel,以便在将来使其更易于维护...我有很多使用Laravel构建API的经验,但我在使用Laravel构建网站的经验非常有限,结果我我需要其他专业人士的一点指导.

总之,我非常感谢以下非常简单的问题的答案,如果有人可以饶我几分钟......

基于文件的JS和CSS而不是基于应用程序

我喜欢以特定的方式编写我的JS和CSS文件,其中每个页面都有自己的与页面相关的特定文件.例如,about.php可能具有以下依赖项:

JS:

• jquery.js
• any_other_third_party_library.js
• app.js (全球职能)
• about.js (页面特定功能)

CSS:

• some_third_party_library.css
• app.css (全球风格)
• about.css (页面特定样式)

在我自己的框架上,上面的内容将被合并并缩小为一个JS文件和一个CSS文件.根据我的理解,Laravel Mix就是这样做的......

但是,据我所知,这样做的方法如下:

webpack.mix.js:

// About
mix.scripts([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js');

很简单,我想知道的; 以上是正确的方法吗？是否有更好,更有效的方法来为每个页面自动执行此操作？

什么是bootstrap.js和app.js文件？

从我所看到的,这些文件只是加载依赖项,但这有点令人困惑,因为一些依赖项可能是页面特定的...请问有人可以更详细地解释这些文件的用途是什么？或者至少,他们之间的区别是什么......

摆脱Vue

我没有兴趣在Vue我的项目中使用,所以我删除了以下文件:

/components/Example.vue app.js中的vue代码

这有什么关系吗？

我正在尝试为我的应用程序构建 PWA；并且花了将近 48 小时试图弄清楚如何在 Laravel Mix 中使用 Workbox。具有讽刺意味的是，谷歌说 Workbox 旨在让事情变得简单！

呸！

好的，到目前为止我已经想通了——

1. 我将需要使用 ，InjectManifest Plugin因为我想在我的 Service Worker 中集成推送通知服务

2. 我不知道如何specifiy这些路径swSrc和swDest。

3. 什么代码应该进入我的webpack.mix.js，我是否应该在我的resources/js文件夹中有一个临时的 service-worker 来在文件夹中创建一个新的 service worker public/。

有人可以帮忙吗？

PS：我几乎阅读了所有博客和帮助文章；但没有人谈论可靠地将 Workbox 与 Laravel 混合使用。真的很感激这里的一些帮助。

我在 Docker 容器内的 Laravel Mix 中设置热模块重新加载时遇到一些问题。

我有以下 Dockerfile：

FROM php:7.4.0-fpm

RUN curl -sL https://deb.nodesource.com/setup_13.x | bash

RUN apt-get update && \
    apt-get install -y -q --no-install-recommends \
    nano apt-utils curl unzip default-mysql-client nodejs build-essential git \
    libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \
    libwebp-dev libjpeg-dev libpng-dev libxpm-dev \
    libfreetype6-dev libaio-dev zlib1g-dev libzip-dev && \
    echo 'umask 002' >> /root/.bashrc  && \
    apt-get clean

# Docker PHP Extensions
RUN docker-php-ext-install -j$(nproc) iconv gettext gd mysqli curl pdo pdo_mysql zip && \
    docker-php-ext-configure gd --with-freetype=/usr/include/ …

在我的项目中，我在 SASS 和 Blade 中使用了一些资源（主要是图像）。另外，我有一些资源只在 SASS 中使用，有些只在 Blade 中使用。

例如，我可以mix('images/logo.png')在 Blade 文件和background: url('../images/logo.png')SASS 文件中使用。

至于我的目录结构，我做了以下事情：

- resources
    - js
    - sass
    - images  // All images used by Blade, Sass, or both
    - fonts

为了编译我的资源并将它们放在public文件夹中，我使用以下内容webpack.mix.js：

mix.copy('resources/images/**/*.*', 'public/images');
mix.copy('resources/fonts/**/*.*', 'public/fonts');
mix.version('public/images/**/*.*');
mix.version('public/fonts/**/*.*');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/vendor.js', 'public/js')
    .scripts([ // Old not ES6 JS
        'resources/js/tpl/core.min.js'
    ], 'public/js/core.min.js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .version();

结果，我在 app.css 中得到了那个 URL：

background: url(/images/logo.png?0e567ce87146d0353fe7f19f17b18aca);

虽然我在渲染的 HTML 中得到另一个：

src="/images/logo.png?id=4d4e33eae039c367c8e9"

它们被视为 2 种不同的资源，这不是我所期望的......

潜在的解决方法 …

我正在尝试在 AWS 无服务器平台上部署我的 Laravel 应用程序，我在我的 Laravel-mix 中使用动态导入和代码拆分来编译资产，要执行此操作我按照bref 包文档中的步骤安装了所需的图书馆按照指示，我还将我的公共目录与我的 s3 存储桶同步

npm run prod
aws s3 sync public/ s3://<bucket-name>/ --delete --exclude index.php

并将我的.env文件配置为：

MIX_ASSET_URL=https://<bucket-name>.s3.amazonaws.com
ASSET_URL=https://<bucket-name>.s3.amazonaws.com

接下来我将我的blade文件配置为：

<script src="{{ asset('nits-assets/js/app.js') }}"></script>

我的webpack.mix.js文件有：

const mix = require('laravel-mix')

const webpack = require('webpack');

const ASSET_URL = process.env.ASSET_URL + "/";

mix.js('resources/js/app.js', 'public/nits-assets/js')
    .postCss('resources/sass/app.css', 'public/nits-assets/css', [
        require("tailwindcss"),
    ])
    .webpackConfig({
        output: {
            chunkFilename: 'nits-assets/chunks/[name].[contenthash].js',
            publicPath: ASSET_URL
        },
        resolve: {
            symlinks: false,
            alias: {
                NitsModels: path.resolve(__dirname, 'Models'),
            },
        },  
        plugins: [ …

我在 Vue 3 项目中收到此错误：

您正在运行 Vue 的 esm-bundler 构建。建议将您的捆绑器配置为使用布尔文字显式替换功能标志全局变量，以便在最终捆绑包中进行适当的摇树。有关更多详细信息，请参阅http://link.vuejs.org/feature-flags。

webpack.mix.js

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

mix.webpackConfig ({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
      alias: {
        vue: "vue/dist/vue.esm-bundler.js"
      },
    },
    optimization: {
        providedExports: …

我使用 npm 安装 bootstrap 并使用 scss 导入它，但是当我尝试编译时，它只显示无休止的警告

npm install bootstrap 

app.scss 文件

@import "~bootstrap/scss/bootstrap";

当我运行 dev

npm run dev

然后我看到带有此警告的无限循环

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ?
253 ?   1: $spacer / 4,
    ?      ^^^^^^^^^^^
    ?
    node_modules\bootstrap\scss\_variables.scss 253:6  @import
    node_modules\bootstrap\scss\bootstrap.scss 11:9    @import
    resources\css\app.scss 2:9                         root stylesheet

我的 webpack.mix

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

因此，在 Laravel Mix 中，它在文档中说我们可以将内容添加到以 MIX_ 为前缀的 .env 文件中，然后我们可以在编译时在我们的 JS 文件中访问它。

我想我可能在这里遗漏了一些东西，因为这并没有真正提供 env 文件的任何内容，因为资产在将它们推送到服务器之前已在本地编译为生产模式。这意味着 npm run watch 和 npm run build 都会选择相同的 env 值，对吗？

它作为一种全局变量而不是环境变量，因为您无法根据环境设置值，

这似乎很明显，所以我认为我遗漏了什么？

鉴于webpack.mix.js一个新的 Laravel 项目：

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.
 |
 */

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

仅使用 webpack 和 a 的等价物是webpack.config.js什么？（我希望删除 laravel mix 作为对现有项目的依赖。）

我确实在源代码中找到了这个默认文件，但它没有帮助我。有没有办法可以看到“编译/结果”的 webpack 配置或对应于 laravel 混合默认设置的模板/起点？

我使用以下命令通过 Laravel Mix 模块捆绑我的脚本：

npm run dev // Compile scripts.

npm run prod // Compile and minify scripts.

这些是原生 npm 命令还是自定义 Laravel Mix 命令？它们在哪里定义？

我注意到它们在 Laravel package.json 中被列为“脚本”。这些脚本到底是什么，通过 Laravel Mix 为 Webpack 自定义命令？

"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 --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},