标签: laravel-mix

我正在尝试npm run dev为Laravel Mix 运行,我收到此错误:

> @ dev D:\projects\ptcs
> cross-env NODE_ENV=development webpack --progress --hide-modules --
config=node_modules/laravel-mix/setup/webpack.config.js

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `cross-env NODE_ENV=development webpack --progress --hide-
modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.

我将node.js更新为6.11.0,将npm更新为5.2.0,但它没有帮助.我在Windows 7上运行Homestead.

我尝试使用Laravel Mix安装Font Awesome,但在执行时run npm dev我收到以下消息:

错误在./~/font-awesome/scss/font-awesome.scss中编译时出现1错误错误.模块构建失败:/**^"加载样式"后的无效CSS:预期的1个选择器或at-规则是/var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss中的"var content = requi"(第1行,第1列)

我删除了文件中的注释并尝试更改字体路径,但它没有解决问题.

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

fontawesome.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

_variable.scss

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" …

我一直在尝试在我的项目上设置laravel mix并遵循laravel网站上的安装指南,但不断出现错误.

我的package.json文件是

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.4.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  },
  "name": "Code",
  "version": "1.0.0",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "dependencies": {
    "ansi-regex": "^2.1.1",
    "ansi-styles": "^2.2.1",
    "axios": "^0.15.3",
    "babel-core": "^6.24.1",
    "babel-code-frame": "^6.22.0",
    "babel-generator": "^6.24.1",
    "babel-messages": "^6.23.0",
    "babel-helpers": "^6.24.1",
    "babel-register": "^6.24.1", …

当我尝试在 Laravel 项目中使用 Laravel Mix 编译 React 组件时，会引发错误 2 生命周期。

E:\MY PROJECTS\Samriddhi Institute> npm run dev

@dev E:\MY PROJECTS\Samriddhi Institute npm rundevelopment

@development E:\MY PROJECTS\Samriddhi Institute cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/ setup/webpack.config.js

[webpack-cli] 错误：未知选项“--hide-modules”[webpack-cli] 运行“webpack --help”以查看可用的命令和选项 npm ERR！代码 ELIFECYCLE npm 错误！errno 2 npm 错误！@开发：cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=no de_modules/laravel-mix/setup/webpack.config.jsnpm 错误！退出状态 2 npm ERR！npm 错误！@开发脚本失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！
C:\Users\RADHESHYAM\AppData\Roaming\npm-cache_logs\2021-09-17T05_52_36_957Z-debug.log npm 错误！代码 ELIFECYCLE npm 错误！errno 2 npm 错误！@dev：npm run developmentnpm 错误！退出状态 2 npm …

我安装了一个新的 Laravel 8 应用程序，然后我跑了……

npm install

后来我跑...

npm run dev

我收到以下错误。

'mix' 不被识别为内部或外部命令

> @ dev E:\wamp64\www\Laravel8Projects\Laravel_Livewire_JetStream_Projects\jetstream_blog
> npm run development


> @ development E:\wamp64\www\Laravel8Projects\Laravel_Livewire_JetStream_Projects\jetstream_blog
> mix

'mix' is not recognized as an internal or external command, operable
program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm
ERR! @ development: `mix` npm ERR! Exit status 1 npm ERR! npm ERR!
Failed at the @ development script. npm ERR! This is probably not a
problem with npm. …

Run Code Online (Sandbox Code Playgroud)

根据问题标题,laravel 5.4 npm run watch和npm run watch-pollla 之间有什么区别？

我看不出它们给出的输出有什么区别.

对于我的管理面板,我提取所有资产,包括manifest-json.jsto mix.setPublicPath(path.normalize('public/backend/')).

所有文件都正确添加到后端文件夹,manifest-json.js文件如下所示:

{
    // all correct here
    "/js/vendor.js": "/js/vendor.js",
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css",
    "/js/manifest.js": "/js/manifest.js"
}

问题是在使用时

{{ mix('backend/css/app.css') }}

在我的刀片文件中,它看起来public/manifest-json.js而不是寻找它backend/manifest-json.js.

如何确保使用正确的manifest-json.js文件？

我想在我的较少文件中使用内联js,但我收到以下消息:

内联JavaScript未启用.它是否设置在您的选项中？

我怎样才能启用它？

在Laravel 5.4中引入了Mix来编译资产并维护资产管道.将默认值混合到名为的公共目录public.在许多情况下,包括我的,我的公共目录被称为其他东西.在我的情况下,它是public_html.

如何更改编译资产的公共目录？

我试过改变其中的路径webpack.min.js:

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

不幸的是,这编译为:

- public
|- _html
|-- assets
|--- css
|--- js
|- fonts

在Laravel 5.3和Elixir中,这很简单:

elixir.config.publicPath = 'public_html/assets';

我已经检查了Mix的配置文件,但是在这里看不到任何明显的东西.

请注意:这是Laravel Mix,npm包,所以它与index.php文件中的修改无关.

如果我使用WebPack和Laravel Mix,我应该如何包含webpack插件？我很困惑我将插件代码添加到哪个文件中.

我的下面尝试似乎没有运行我的插件.该插件应该压缩js,css文件,但不是.

webpack.config.js:

  require('./node_modules/laravel-mix/src/index');
  require(Mix.paths.mix());

  // My plugin is here
  const CompressionPlugin = require('compression-webpack-plugin');

  Mix.dispatch('init', Mix);

  let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');

  module.exports = new WebpackConfig({
     plugins: [
      new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.css$|\.html$|\.svg$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ],
  }).build();

webpack.mix.js:

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

  mix.setPublicPath('dist')
     .js('src/app.js', 'scripts/')
     .extract([
        'jquery',
        'axios',
        'babel-polyfill',
        'lodash',
        'tether',
        'vue',
        'bootstrap-vue',
        'vuex',
        'vuex-localstorage',
     ])
     .sass('src/styles/app.scss', 'styles/')
     .copyDirectory('src/assets', 'dist/assets')
     .options({
        processCssUrls: false,
        uglify: true
      })
  .version();

我的NPM命令是:

node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV = development …