我正在用ES6重新编写我的电子应用程序,使用Laravel Mix编译应用程序JS和SASS.现在,主进程可以很好地加载渲染过程.一旦发生这种情况,我的app.js就会加载,这就是我遇到问题的地方.所以我这样做:

import { remote } from 'electron';

这导致控制台中出现此错误:

Uncaught Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

现在我已经尝试重新安装电子,即使电子在主要过程开始时起作用.该行在编译的js中引用了这个:

/* WEBPACK VAR INJECTION */(function(__dirname) {var fs = __webpack_require__(8)
var path = __webpack_require__(9)

var pathFile = path.join(__dirname, 'path.txt')

if (fs.existsSync(pathFile)) {
  module.exports = path.join(__dirname, fs.readFileSync(pathFile, 'utf-8'))
} else {
  throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
}

我不确定发生了什么,任何建议或信息都会有很大的帮助!

谢谢

编辑:我试过运行它--verbose:

/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.1.16/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for …

我正在尝试使用Laravel Mix编译webpack配置文件.

关于Laracasts Vue 2系列的webpack剧集,

// Scripts

  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
....

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

当我运行$ npm run dev时,我收到一个错误:

npm ERR! Exit status 1

npm ERR! Failed at the @ dev script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.

// Running

npm ERR! node v4.4.5
npm ERR! npm v2.15.5

// The error points to
let extractPlugin = new plugins.ExtractTextPlugin(
/Users/User/Code/project/node_modules/laravel-mix/setup/webpack.config.js:126

问题似乎是更新Node.js依赖:https://github.com/JeffreyWay/laravel-mix/issues/264

如何更新Node.js依赖项？

我在尝试:

$ brew upgrade …

我正在尝试在Laravel 5.7中包含Font Awesome工具包.

这些是我采取的步骤:

1)跑 npm install --save-dev @fortawesome/fontawesome-free

2)检查文件夹node_modules/,一切看起来都不错.

$fa-font-path: "../webfonts";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

3)然后我跑了......

npm run development -- --watch

4)我看到了文件public/fonts/vendor/@fortawesome/fontawesome-free/.

但是,当我进入浏览器时,图标看起来像这样:

I want to use Webpack chunks with Laravel Mix. At the moment this list is outputted:

                                               Asset      Size        Chunks             Chunk Names
                                     /entry-point.js  3.37 MiB  /entry-point  [emitted]  /entry-point
                                                0.js  57.9 KiB             0  [emitted]  
                                                1.js  20.7 KiB             1  [emitted]  
                                               10.js  24.2 KiB            10  [emitted]  
                                               11.js  17.8 KiB            11  [emitted]  
                                               12.js  17.3 KiB            12  [emitted]  
                                               13.js  20.3 KiB            13  [emitted]  
                                               14.js  34.3 KiB            14  [emitted]  
                                               15.js  16.3 KiB            15  [emitted]  
                                               16.js  16.3 KiB            16  [emitted]  
                                               17.js  18.8 KiB            17  [emitted]  
                                               18.js  9.34 KiB …

我目前正在潜入Laravel Mix,到目前为止,虽然我完全理解Laravel Mix是什么以及它是如何工作的,但我想了解更多关于常见做法和'How-Tos'......

例如,考虑这个文件结构:

/resources/assets/js/app.js (all global functions)
/resources/assets/js/index/index.js (functions specific to index.js)
/resources/assets/js/about/about.js (functions specific to about.js)
/resources/assets/js/contact/contact.js (functions specific to contact.js)

现在,理想情况下,我希望通过以下方式合并和缩小以下内容:

/public/js/index/index-some_hash.js (including app.js)
/public/js/about/about-some_hash.js (including app.js)
/public/js/contact/contact-some_hash.js (including app.js)

据我了解,实现这一目标的方法如下:

// Index
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();

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

// Contact
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/contact/contact.js'
], 'public/js/contact/contact.js').version();

我的问题

很简单,我想知道以上是否是正确的方法来做我想做的事情？是否有更好的方法,或更常见的方法来实现这一目标？

如果上述结构错误,我的文件还有其他方式可以合并,请分享您的知识.但是,除非有充分的理由,否则我想避免以下情况:

• 为每个页面提供两个单独的文件,即app.min.js和index.min.js.这需要每页两次查找,理想情况下应该尽可能少
• 将同一文件提供给我网站上的所有页面.将代码提供给不会使用它的页面是浪费资源,无论缓存...

一个想法......

我注意到其中一个JS文件中有一行代码; require('./bootstrap');.叫我老式,但我从未在JavaScript中看到过这种情况(我假设它来自node.js).也就是说,显然它只是将bootstrap.js文件作为依赖项加载到特定文件中.因此,考虑到这一点,以下解决方案是否会更好:

about.js

require('./app'); // Include global functions

// Do some magic here specifically …

所以我在IE 11中遇到了ES6,Webpack和VUE JS的问题.这适用于Edge,Chrome,Safari和Firefox,但不适用于IE 11.

错误:

SCRIPT1002: Syntax error
vue.js (16,8498)

好的,那么这条线怎么样？

(module,__webpack_exports__,__webpack_require__){"use strict";eval("/* unused harmony export getJSON */\n/* unused harmony export getScrollBarWidth */\n/* unused harmony export translations */\n/* harmony export (immutable) */ __webpack_exports__[\"b\"] = delayer;\n/* unused harmony export VueFixer */\n// coerce convert som types of data into another type\nconst coerce = {\n  // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning.\n  boolean: val => (typeof val === 'string' …

有谁知道为什么它会引发以下错误以及如何修复它？我还尝试使用npm install多次重新安装所有软件包。在 Windows 上重新安装 NodeJS 不起作用；我正在使用 Laravel 8.22.0。

完整日志

0 verbose cli [
0 verbose cli   'D:\\Programme\\NodeJS\\node.exe',
0 verbose cli   'D:\\Programme\\NodeJS\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'run',
0 verbose cli   'development'
0 verbose cli ]
1 info using npm@7.3.0
2 info using node@v15.5.1
3 timing config:load:defaults Completed in 1ms
4 timing config:load:file:D:\Programme\NodeJS\node_modules\npm\npmrc Completed in 2ms
5 timing config:load:builtin Completed in 2ms
6 timing config:load:cli Completed in 1ms
7 timing config:load:env Completed in 0ms
8 timing config:load:file:D:\My\Path\.npmrc 33,,,,,,,,Completed in 0ms
9 …

了解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代码

这有什么关系吗？

伙计们,请你帮我解决这个问题,我在为我的Laravel Mix运行npm run dev时遇到了麻烦.我按照下面的链接但仍然存在错误.我的操作系统有问题吗？我试图删除node_modules,运行npm install --global cross-env.并再次运行NPM安装.

https://github.com/JeffreyWay/laravel-mix/issues/478

Laravel 5.4'cross-env'不被视为内部或外部命令

这是我的版本:

• Laravel混合版:^ 2.0
• 节点版本(节点-v):8.9.0
• NPM版本(npm -v):5.6.0
• 操作系统:Windows7
• XAMPP

> @ development C:\xampp\htdocs\codetinerant
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --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! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm …

似乎webpack在 92%的块资产优化上停留了大约30秒以上,以显示简单的js/css更改.对于任何理智的人来说,这是太久了,他们可以坐下来等待他们的大部分生活,看看应该立即呈现的东西.

我们处于开发模式(因此我们需要源映射,这会增加延迟),但它仍然不应超过30秒.另外,我们没有使用uglify(我在GitHub上看到过它占用了大量的时间).

我们怎样才能让构建时间接近即时,或者比现在快得多？

UPDATE

这是laravel-mix文件:

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

mix.react('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false
   });

mix.webpackConfig({
    // Note: First build will always be slower regardless
    // Here we're talking about rebuild time

    // If commented out, rebuild is ~6 secs
    // devtool: "inline-source-map",

    // If not commented out, rebuild is 30+ secs
    devtool: "inline-source-map",
});

我发现inline-source-map最快的调试是最好的,因为它提供了关于在源代码中修复哪个错误行的最详细信息,非常非常直接地解决了什么问题.我发现其他类型比较神秘,并且没有迹象表明要在源代码中修复哪个行号,因此调试需要更长的时间.

你们是怎么做到的？有没有办法快速重建,同时仍然能够使用源代码中的错误行号进行调试来修复它(在chrome devtools控制台中显示)？