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

Question

简介

我正在一个需要上传文件的项目上尝试Symfony 4.1 + Yarn + Webpack Encore。为此，我选择了 OneUpUploaderBundle 和 Blueimp jquery file upload 前端。

但是被需要的配置数量所困扰 与 old scool 方法相反，添加 CSS 和 JavaScript 任何需要它们的地方 - 但没有包装的优势 管理。

当然可以使用包管理器轻松更新依赖项 确实是有代价的。但是当初始配置后 build 编译之后很容易或应该很容易。

问题

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

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

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();

Package.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"
    }
}

ma​​in.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

对我有用的是 adding an alias 直接在 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;