javascript - 纱线：$未定义

问题描述

我第一次使用 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 不工作。

我错过了什么？

提前致谢！

标签： javascriptdatatablesyarnpkg

解决方案

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

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

如何使其工作：

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

然后你也跑了yarn add -D datatables.net-dt。现在你应该在里面有一个datatables.net和一个datatables.net-dt文件夹node_modules。

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

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

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

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

您可能的错误：

$ is not definedjQuery告诉您的代码的某些部分在加载之前正在尝试使用。

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

所以不要在你的应用代码的标签中使用自定义<script>标签，因为它会在你的标签底部定义的任何其他代码之前加载和执行！html<head><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 行。

javascript - 纱线：$未定义

问题描述

解决方案

推荐阅读