纱线：$未定义

Question

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

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

[Show/hide message details.] 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 文件，但数据表不工作。

我是不是漏掉了什么？

提前致谢！

Answer 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（简称 $）编写代码，稍后 required/imported 到这个文件！这是因为 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 样板中导入 jQuery：

默认情况下已经很好地完成了，您不必为此费心。打开你的 resources\js\bootstrap.js 并看到这两行：

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

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

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

纱线：$未定义

yarn: $ is not defined

javascript

datatables

yarnpkg