如何使用 laravel-mix 成功编译 Puppeteer 的资产。错误：找不到模块“。”

Question

大家下午好，

我今天被这个问题困扰了很长时间，希望得到一些帮助；我无法使用 laravel-mix 运行 Puppeteer 来编译所有内容。
现在，我可以运行npm install puppeteer，并在我不必通过laravel-mix编译我的js文件时正常运行我的截图脚本。

无论如何，通过简单的步骤来重现我当前的错误：
rm -rf node_modules && npm install && npm run production
最后一个命令抛出了很多警告：

These dependencies were not found: 
* child_process in ./node_modules/puppeteer/lib/Launcher.js, ./node_modules/puppeteer/node6/lib/Launcher.js
* fs in ./node_modules/extract-zip/index.js, ./node_modules/extract- zip/node_modules/mkdirp/index.js and 20 others
* net in ./node_modules/https-proxy-agent/index.js, ./node_modules/ws/lib/websocket.js
* readline in ./node_modules/puppeteer/lib/Launcher.js, ./node_modules/puppeteer/node6/lib/Launcher.js
* tls in ./node_modules/https-proxy-agent/index.js, ./node_modules/ws/lib/websocket.js

To install them, you can run: npm install --save child_process fs net readline tls

These relative modules were not found:

* ./types/other in ./node_modules/puppeteer/node_modules/mime/index.js
* ./types/standard in ./node_modules/puppeteer/node_modules/mime/index.js  

很自然，我运行npm install --save child_process fs net readline tls 来安装这些依赖项，然后再次运行npm run production。
弹出相同的错误。所以我做了一些research 并了解到child_processes 已经是节点的一部分，我将这3 行添加到我的webpack.mix.js 文件中。根据Laravel's documentation，可以这样合并webpack配置

mix.webpackConfig({
  target: 'node',
});

这消除了大多数错误消息，太棒了！

These relative modules were not found:

* ./types/other in ./node_modules/puppeteer/node_modules/mime/index.js
* ./types/standard in ./node_modules/puppeteer/node_modules/mime/index.js

根据 Github 上的大多数问题[1][2][3]，需要支持.json 文件扩展名。所以我在webpack.mix.js 中附加了我之前添加的代码

mix.webpackConfig({
  target: 'node',
  resolve: {
    extensions: [ '.ts', '.tsx', '.js', '.json']
  },
});

让我们再次尝试npm run production，它会编译！除非它不起作用并且我们收到以下警告：

WARNING in ./node_modules/node-gyp-build/index.js
13:9-32 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/node-gyp-build/index.js
 @ ./node_modules/bufferutil/index.js
 @ ./node_modules/ws/lib/buffer-util.js
 @ ./node_modules/ws/lib/receiver.js
 @ ./node_modules/ws/index.js
 @ ./node_modules/puppeteer/lib/Connection.js
 @ ./node_modules/puppeteer/lib/Launcher.js
 @ ./node_modules/puppeteer/lib/Puppeteer.js
 @ ./node_modules/puppeteer/index.js
 @ ./headless/screenshot.js
 @ multi ./headless/screenshot.js ./resources/assets/sass/app.scss

WARNING in ./node_modules/node-gyp-build/index.js
20:15-54 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/node-gyp-build/index.js
 @ ./node_modules/bufferutil/index.js
 @ ./node_modules/ws/lib/buffer-util.js
 @ ./node_modules/ws/lib/receiver.js
 @ ./node_modules/ws/index.js
 @ ./node_modules/puppeteer/lib/Connection.js
 @ ./node_modules/puppeteer/lib/Launcher.js
 @ ./node_modules/puppeteer/lib/Puppeteer.js
 @ ./node_modules/puppeteer/index.js
 @ ./headless/screenshot.js
 @ multi ./headless/screenshot.js ./resources/assets/sass/app.scss

WARNING in ./node_modules/puppeteer/lib/BrowserFetcher.js
255:18-33 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/puppeteer/lib/BrowserFetcher.js
 @ ./node_modules/puppeteer/lib/Puppeteer.js
 @ ./node_modules/puppeteer/index.js
 @ ./headless/screenshot.js
 @ multi ./headless/screenshot.js ./resources/assets/sass/app.scss

WARNING in ./node_modules/puppeteer/lib/Launcher.js
26:25-81 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/puppeteer/lib/Launcher.js
 @ ./node_modules/puppeteer/lib/Puppeteer.js
 @ ./node_modules/puppeteer/index.js
 @ ./headless/screenshot.js
 @ multi ./headless/screenshot.js ./resources/assets/sass/app.scss

WARNING in ./node_modules/puppeteer/node6/lib/Launcher.js
26:25-81 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/puppeteer/node6/lib/Launcher.js
 @ ./node_modules/puppeteer/node6/lib/Puppeteer.js
 @ ./node_modules/puppeteer/index.js
 @ ./headless/screenshot.js
 @ multi ./headless/screenshot.js ./resources/assets/sass/app.scss

WARNING in ./node_modules/puppeteer/node6/lib/BrowserFetcher.js
333:18-33 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/puppeteer/node6/lib/BrowserFetcher.js
 @ ./node_modules/puppeteer/node6/lib/Puppeteer.js
 @ ./node_modules/puppeteer/index.js
 @ ./headless/screenshot.js
 @ multi ./headless/screenshot.js ./resources/assets/sass/app.scss

我对这些警告做了更多的research，但我真的无法解决任何问题。但是我在运行我的截图脚本时遇到的最后一个错误是：

Error Output:
================
/home/project-path/public/js/screenshot.js:1
(function (exports, require, module, __filename, __dirname) { !function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}({"+HRN":function(e,t,n){"use strict";var r=n("X3l8").Buffer;e.exports=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.head=null,this.tail=null,this.length=0}return e.prototype.push=function(e){var t={data:e,next:null};this.length>0?this.tail.next=t:this.head=t,this.tail=t,++this.length},e.prototype.unshift=function(e){var t={data:e,next:thi

Error: Cannot find module "."  

这是手头的脚本：

const puppeteer = require('puppeteer');

function delay(timeout) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
}

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
    });
    //parse arguments
    var args = process.argv;
    var indexes = [2, 3, 4];
    var arg_index = {};
    arg_index[2] = 'URL';
    arg_index[3] = 'File Path';
    arg_index[4] = 'Display';
    indexes.forEach(function(index){
        if(typeof args[index] == 'undefined'){
            var parameter = arg_index[index];
            console.log('Missing Parameter: ' + parameter);
            process.exit(1);
        }
    });
    var url = args[2];
    var file_path = args[3];
    var display = args[4];
    var window_width = 1920;
    var window_height = 1080;
    if(display == 'mobile'){
        var window_width = 375;
        var window_height = 667;
    }

    const page = await browser.newPage();
    await page.setViewport({width: window_width, height: window_height});
    await page.goto(url, {waitUntil: 'networkidle0'});
    await page.waitFor(1500);
    await page.screenshot({path: file_path, type: 'png', fullPage: true});

    await browser.close();
})();

有什么想法吗？
编辑：
为好奇的人提供一些额外信息。
Laravel：5.5.40
节点：v8.11.3
NPM：5.6.0
Laravel 混合：1.7.2
傀儡师：1.6.0

Answer 1

尽量不要从 Webpack 捆绑 puppeteer 或 node_modules。

您可以通过这个插件试一试，轻松忽略所有 node_modules：webpack-node-externals