webpack symfony encore jQuery第三方插件 [英] webpack symfony encore jquery third party plugins

问题描述

我在symfony webpack encore中实现jquery 3rd party插件时遇到问题. 到目前为止，我有几个具有多种逻辑的.js文件，还有在树枝文件中执行一些js的脚本.

i am having problem with implementing jquery 3rd party plugins in symfony webpack encore. so far i have several .js files with varous logic, and also some scripts inside twig files that execute some of js.

这是app.js:

var $ = require('jquery');
global.$ = global.jQuery = global.jquery = $;
require('jquery-validation');

webpack可以编译，但是当我执行程序时，我得到了:

webpack compiles, but when i execute program i get:

$(...).validate不是函数

$(...).validate is not a function

webpack.config.js很简单:

webpack.config.js is straightforward:

var Encore = require('@symfony/webpack-encore');

Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.setManifestKeyPrefix('build/')

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

.splitEntryChunks()
.enableSingleRuntimeChunk()
;
module.exports = Encore.getWebpackConfig();

package.json:

package.json:

"jquery": "^3.3.1",
"jquery-validation": "^1.18.0",
"jquery-datetimepicker": "^2.5.20",

更新: jquery-datetimepicker工作正常， 但是jquery-validation不是！

update: jquery-datetimepicker is working fine, but jquery-validation is not!

推荐答案

解决方案: 使用别名信息更新webpack.config.js，以便每个jquery 3rd party插件都使用相同的jquery

solution: update webpack.config.js with alias information, so that every jquery 3rd party plugin uses same jquery

var path = require('path');

Encore
    .addAliases({
        'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
    })

这篇关于webpack symfony encore jQuery第三方插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！