在 Laravel 应用程序中使用 NPM 包时遇到问题答案

【问题标题】：Trouble using NPM package in Laravel application在 Laravel 应用程序中使用 NPM 包时遇到问题
【发布时间】：2021-11-14 05:27:11
【问题描述】：

我已经使用 Laravel 多年了，但直到现在我才在我的 Laravel 应用程序中使用过 NPM 包。我使用 Laravel Valet 作为我的开发环境。

我正在尝试使用一个与remove.bg js package 接口的简单包，但经过数小时尝试不同的事情后，我无法让它工作。

这是我所做的：

通过npm install remove.bg安装包。
这个包抱怨它找不到它所依赖的模块（unirest、http 等），所以我通过npm install 安装了它们，甚至添加了这些后备，因为它抱怨 Webpack 5 和 polyfill：

我的 webpack.mix.js 文件：

mix.webpackConfig({
    resolve: {
        fallback: {
            fs: require.resolve('browserify-fs'),
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            path: require.resolve('path-browserify'),
            zlib: require.resolve('browserify-zlib'),
        },
    },
});

在我的resources/js/bootstrap.js 中我添加了：

import { RemoveBgResult, RemoveBgError, removeBackgroundFromImageBase64 } from 'remove.bg';
window.Removebg = require('remove.bg');

运行npm run dev，没有错误。
在我的刀片模板中包含 <script src="{{ mix('/js/app.js') }}"></script>。

但是，当我查看我的页面时，我在控制台中收到以下错误：

app.js:137237 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at Object.inherits (app.js:137237)
    at Object../node_modules/browserify-zlib/lib/index.js (app.js:28688)
    at __webpack_require__ (app.js:139212)
    at Object../node_modules/unirest/index.js (app.js:131192)
    at __webpack_require__ (app.js:139212)
    at Object../node_modules/remove.bg/dist/index.js (app.js:108502)
    at __webpack_require__ (app.js:139212)
    at Module../resources/js/bootstrap.js (app.js:16242)
    at __webpack_require__ (app.js:139212)
    at Object../resources/js/app.js (app.js:16230)

我被难住了。我在这里做错了什么？

【问题讨论】：

JS 真的是由那个混合配置准备的吗？您似乎失去了实际构建它的说明 - mix.js('resources/js/app.js', 'public/js')
是的，对不起。为简洁起见，我只是省略了它。这就是那里：mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [ require('tailwindcss')]);
@Mark 我相信应该在服务器上运行，而不是客户端浏览器。 NodeJS 和 Laravel 都是服务器端技术，如果不了解您要完成的工作，将两者结合使用并没有多大意义。
你在 137237 上查看 app.js 吗？有什么代码？
您的app.js 是否仍包含require('./bootstrap') 行？

标签： laravel npm webpack laravel-mix

【解决方案1】：

你可能会错过 webpack.mix.js 文件

添加这一行

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

【讨论】：

就在里面