Symfony 4.1 项目中的 Yarn 和 Webpack Encore 配置

Question

介绍

我正在一个需要文件上传的项目上尝试Symfony 4.1++ 。为此，我选择使用前端。YarnWebpack EncoreOneUpUploaderBundleBlueimp jquery file upload

但是，与旧式的酷方法相比，需要添加大量的配置CSS并JavaScript 在需要的地方添加它们，但缺乏包管理的优势，这让其受到了一些困扰。

当然，使用包管理器轻松更新依赖项确实需要付出代价。但是，在初始配置构建编译之后，之后很容易或者应该很容易。

问题

我希望能够使用前面提到的库组合上传文件。我正在寻找正确的配置。

目前构建无法编译 - 我收到错误！

ERROR  Failed to compile with 1 errors
This dependency was not found:
* jquery-ui/ui/widget in ./node_modules/blueimp-file-upload/js/jquery.fileupload.js

正如您从附加代码中看到的那样，我尝试为 提供别名jquery-ui/ui/widget，但它没有找到找到的包。

另外，Yarn 目录中没有包jquery-ui/ui/widget，但jquery.ui.widget我尝试要求但未成功。

代码

Webpack.config.js

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

const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')
    .addEntry('blueimp', './assets/js/blueimp.js')

    .addStyleEntry('global', './assets/css/global.scss')
    .addStyleEntry('admin', './assets/css/admin.scss')

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'jquery.ui.widget': 'jquery-ui/ui/widget'
    })

    .enableSourceMaps(!Encore.isProduction())

// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

包.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.20.1",
        "copy-webpack-plugin": "^4.5.1"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "blueimp-file-upload": "^9.22.0",
        "bootstrap": "^4.1.3",
        "jquery": "^3.3.1",
        "jquery.ui.widget": "^1.10.3",
        "jstree": "^3.3.5",
        "node-sass": "^4.9.2",
        "popper.js": "^1.14.3",
        "sass-loader": "^7.1.0"
    }
}

main.js

// loads the jquery package from node_modules
var $ = window.$ = window.jQuery = require('jquery');

// or you can include specific pieces
require('bootstrap/dist/js/bootstrap');

blueimp.js

'use strict';

// add upload
require('blueimp-file-upload/css/jquery.fileupload.css');
require('blueimp-file-upload/css/jquery.fileupload-ui.css');

require('jquery/dist/jquery.js');
require('jquery.ui.widget/jquery.ui.widget.js');
require('blueimp-file-upload/js/jquery.fileupload.js');
require('blueimp-file-upload/js/jquery.iframe-transport.js');

谢谢

感谢您的评论和回答。

Answer 1

对我有用的是直接在 web pack 配置上添加别名。请注意，我还需要该path模块。

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

const CopyWebpackPlugin = require('copy-webpack-plugin');


Encore
    .setOutputPath('public/build/')
    // ...
;

var config = Encore.getWebpackConfig();

config.resolve.alias = {
    'jquery-ui/ui/widget': path.resolve(__dirname, 'node_modules/jquery.ui.widget/jquery.ui.widget.js')
};

module.exports = config;