javascript - Symfony 5/Encore - Javascript 问题

Question

我是 Symfony 的初学者，刚刚完成了我的第一个网站。我构建的网站基于 Bootstrap，我使用一些 jquery 来制作我制作的附加 js 文件。

我在使用 Webpack 和 Encore 时遇到了一些问题，因为我的 Bootstrap JS 或 jQuery 都无法工作。我的 SCSS 没有问题，我自制的 js 也可以工作(除了它们不支持 jQuery)。

我做了什么:

npm install --save-dev jquery
npm install --save-dev popper.js
npm install --save-dev bootstrap

在我的webpack.config.js (Encore)中:

.setOutputPath('public/build/')
.setPublicPath('/build')

.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')

.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
})
.enableSassLoader()

我也尝试过有或没有

.autoProvidejQuery()

在我的app.js

import $ from 'jquery';

global.$ = global.jQuery = $;

import 'bootstrap';

在我的base.html.twig

<script src="{{ asset('build/js/app.js') }}"></script>

当一切正常时，我终于可以在控制台中运行了

npm run dev

或

npm run build

之后，我的 js 功能就无法使用了。在需要 jQuery 的页面上，我在控制台中遇到错误。

Uncaught ReferenceError: jQuery is not defined
    at bootstrap-datepicker.min.js:7
    at bootstrap-datepicker.min.js:7
book:94 Uncaught ReferenceError: $ is not defined
    at book:94

我有点迷失，不知道该尝试什么。如果我手动添加我的 js 文件而不使用 Encore，一切都会正常。

预先感谢您的帮助!

Answer 1

更新 encore 后，您需要像这样在 js 中导入 css 和 jquery

//your css files
import '../css/yourCss.css';
//jquery just the $ sign 
const $ = require('jquery');

然后你需要在你的 webpack 配置文件中添加一个条目，例如

 //you have to make it one word like app, ad 

.addEntry('ad', './assets/js/ad.js')

要在 twig 文件中使用 js 和 css，您需要使用 encore 的内置函数添加 css，而无需使用正常的链接标记，仅此行

{{ encore_entry_link_tags('ad') }} // ad = the entry name

要使用java脚本，您需要使用此函数

{{ encore_entry_script_tags('ad') }} // ad = the entry name

如果您使用 VS Code，我建议使用此扩展 https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-extension-pack

使用此扩展，您只需在 twig 文件中输入 encorecss，扩展将自动为您完成该功能