Question

我使用Symfony 4.3，当我尝试从webpack.config.js外部访问jQuery时遇到以下问题：“未捕获的ReferenceError：未定义jQuery”。

我的webpack.config.js：

df1 = pd.DataFrame({'A': ['A0', 'A1', 'A2', 'A3'],
                    'B': ['B0', 'B1', 'B2', 'B3'],
                    'C': ['C0', 'C1', 'C2', 'C3'],
                    'D': ['D0', 'D1', 'D2', 'D3']},
                   index=[0, 1, 2, 3])

df4 = pd.DataFrame({'B': ['B2', 'B3', 'B6', 'B7'],
                    'D': ['D2', 'D3', 'D6', 'D7'],
                    'F': ['F2', 'F3', 'F6', 'F7']},
                   index=[0, 1, 2, 3])

result = pd.concat([df1, df4], axis=1, sort=False)

我在资产/js/app.js中的app.js

 Encore
    // ...
    .addEntry('app', './assets/js/app.js')
    //...
    .autoProvidejQuery()
;

我的树枝文件中的日历：

var $ = require('jquery');
global.$ = global.jQuery = $;
require('bootstrap');
require('../css/app.scss');
require('../css/bootstrap.min.css');

“ npm run dev”工作正常，但仅刷新此页面时我没有CSS，js或jQuery（我网站的其他部分在CSS，JS上都可以正常工作。）。

谢谢！

Answer 1

尝试改用import：

import $ from "jquery";
global.$ = global.jQuery = $;

由于.autoProvidejQuery()是为了使jQuery具有全局性（可从window获得），因此它应该可以根据需要工作。

请注意，请勿将import用于CSS。它会在生产中失败。

Answer 2

我找到了CSS的解决方案：

在资产/ css中创建一个css文件，以导入datepicker的css：资产/css/book.css

    @import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css');

创建book.js来调用book.css：资产/js/book.js

require ('../css/book.css');

在我的模板上调用此方法，如下所示： templates / book.html.twig

    {% block stylesheets %}
        {{ parent() }} 
        {{ encore_entry_link_tags('book') }}
    {% endblock %}

有效！我将尝试以这种方式修复javascript

Webpack和jQuery与Symfony 4.3

2 个答案: