使用 Webpack 在 Laravel 项目中包含 node_modules答案

【问题标题】：Include node_modules in Project Laravel using Webpack使用 Webpack 在 Laravel 项目中包含 node_modules
【发布时间】：2018-12-29 10:30:30
【问题描述】：

我知道这是一个愚蠢的问题。但是我已经按照 Laravel 中关于如何将 node_modules 包含到我的项目中的教程进行了操作。我已经在我的内部配置了

resources/assets/js/app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));

并在我的 webpack.mix.js 中配置

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

但是，当我尝试运行我的代码时，我总是得到一个 Uncaught ReferenceError: require is not defined

我需要用 Webpack 配置什么吗？

谢谢

【问题讨论】：

你确定你添加了 require.js 依赖吗？
@vizsatiz 我认为不是。你能帮助我吗？缺少 Laravel 的文档。这是我第一次使用 Webpack
我还没有在 laravel 上工作过，但我之前在 Angular 应用程序中启用了 require。因此，凭借有限的知识，我知道您应该将 require js 添加到您的依赖项中。您可以参考requirejs.org/docs/start.html 了解如何执行此操作。如果您真的想要它，我可以将其解释为这个问题的答案
你安装了什么版本的Node和npm？您使用什么操作系统？您是否在 cli 或浏览器中收到此错误？
@RossWilson Windows 10，是的，在 Google Chrome 的控制台上。节点 10.2.1，NPM 5.6.0。真的不知道如何解决它。

【解决方案1】：

由于您正在运行mix.scripts(...)，因此您的代码最终不会被转译，并且 require 语句实际上不会起作用。 scripts 主要用于简单的拼接和缩小js文件。

你应该改用mix.js(...):

改变

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

到

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/testvue.js'
], 'public/js/app.js');

【讨论】：