纱线：$未定义答案

【问题标题】：yarn: $ is not defined纱线：$未定义
【发布时间】：2019-03-12 14:17:18
【问题描述】：

我第一次使用 Yarn。我已经安装了最新版本的 Laravel Boilerplate (http://laravel-boilerplate.com/) 并且使用了 Yarn。

我需要包含 JS 库 DataTables (https://datatables.net/)。不幸的是，我是 Yarn 的新手，我不确定我是否做对了一切，因为我得到了错误：

[显示/隐藏消息详细信息。] ReferenceError: $ is not defined

在这一行：

$(document).ready(function() {
...

这告诉我它找不到 jquery 库，但它应该在那里。

这里是 webpack.mix.js 代码：

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath('public');

mix.sass('resources/sass/frontend/app.scss', 'css/frontend/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend/backend.js')
    .extract([
        'jquery',
        'datatables.net-dt',
        'bootstrap',
        'popper.js/dist/umd/popper',
        'axios',
        'sweetalert2',
        'lodash',
        '@fortawesome/fontawesome-svg-core',
        '@fortawesome/free-brands-svg-icons',
        '@fortawesome/free-regular-svg-icons',
        '@fortawesome/free-solid-svg-icons'
    ]);

if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
    mix.version();
}

每次我调用命令“yarn prod”以创建 CSS 和 js 文件，但 DataTables 不工作。

我错过了什么吗？

提前致谢！

【问题讨论】：

标签： javascript datatables yarnpkg

【解决方案1】：

不是因为yarn。 Yarn 是一个包管理器，它不运行应用程序代码的任何部分，因此不会产生像你这样的错误。 Yarn 只是用于下载包和管理它们的依赖关系。

然后是Laravel Mix，它只是Webpack 的包装。 Webpack 读取您的应用程序代码，处理您的 .js 文件中的 require 和 import 命令，然后生成您的包。

如何使其工作：

我想你在安装 Laravel Boilerplate 时确实在项目根目录中运行过yarn 命令（不带参数）。你的node_modules目录里面应该有很多包（超过900个）。

然后你确实也运行了yarn add -D datatables.net-dt。现在您应该在node_modules 中拥有一个datatables.net 和一个datatables.net-dt 文件夹。

我看到你在webpack.mix.js 中添加了datatables.net-dt，这没关系！如文档中所述，您不需要 需要任何其他 require( 'datatables.net-dt' )( window, $ );。 webpack.mix.js 中的那一行就足够了！ DataTable 将在您的 vendor.js 中。

现在在您的index.blade.php 中创建一个带有id="example" 属性的example table，然后将此代码添加到您的resources\js\frontend\app.js 的底部：

$(document).ready(function() {
    $('#example').DataTable();
});

然后运行yarn dev 让Webpack 生成你的包（编译好的js 文件）并在浏览器中查看你的站点。在这些之后，它应该正在全新安装 Laravel Boilerplate，没有任何错误。我刚刚测试了 id，效果很好。

您可能的错误：

$ is not defined 表示您的代码的某些部分在加载之前尝试使用 jQuery。

您必须在resources\js\frontend\app.js 或单独的.js 中使用jQuery（缩写为$）编写代码，这一点很重要，稍后需要/导入此文件！这是因为jQuery 和其他供应商包（如DataTable）存储在vendor.js 中，必须在调用它们之前加载。

所以不要在您的应用代码的html 的<head> 标记中使用自定义<script> 标记，因为该标记将在底部定义的任何其他标记之前加载和执行你的<body> 标签！

看看这个文件resources\views\frontend\layouts\app.blade.php。在body 标签的底部，您会看到：

<!-- Scripts -->
@stack('before-scripts')
{!! script(mix('js/manifest.js')) !!}
{!! script(mix('js/vendor.js')) !!}
{!! script(mix('js/frontend.js')) !!}
@stack('after-scripts')

您的resources\js\frontend\app.js 及其所有导入的脚本将被编译到这个js/frontend.js 文件中。

在 Laravel Boilerplate 中如何导入 jQuery：

默认情况下这是很好的，你不必费心。打开你的resources\js\bootstrap.js，看到这两行：

import $ from 'jquery';
window.$ = window.jQuery = $;

该文件随后将由frontend/app.js 导入。所以在这里写你的代码，你会没事的......

PS.：如果这不能帮助您使其工作，您应该编辑您的问题并提供有关您的来源的更多信息。例如从您的 Chrome DevTools 截取的屏幕截图，显示了发生错误的 JavaScript 行。

【讨论】：

谢谢@ARS81 我不确定出现该错误的原因是什么，我认为我所做的一切都如您所述。重要的是，现在我已经逐步检查了所有内容，现在很完美。再次感谢！
我有一个问题。我还在我的 backend.css 中添加了 bootstrap-datepicker 包，不幸的是我没有看到样式。我在我的 backend.css 代码之后包含了一个 datepicker.css，但它并没有改变任何东西。我应该如何包含一些 js 包 css ？我应该混合它，如果是的话 - 最佳做法是什么？提前致谢！
@VinceCarter 您确定要在应用程序的后端/管理 UI 中使用它吗？无论如何......你不应该在你的html 中使用额外的<link> 标签来包含这个新包的css。而不是打开你的resources\sass\backend\app.scss文件并将这一行添加到末尾@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';或frontend\app.scss（？）当然你已经安装了它像yarn add -D bootstrap-datepicker和bootstrap-datepicker像你一样添加到你的webpack.mix.js之前使用datatables.net-dt 包。经过测试，对我来说效果很好。
@VinceCarter 当然你必须运行npm run dev 重新生成你编译的js 和css 文件...
再次感谢。我已将 datepicker.css 文件导入到后端/app.scss 中，奇迹发生了 :)