Question

简介

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

但是有点被所需的配置量所困扰与旧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"
    }
}

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

对我有用的是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;

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

简介

问题

代码

谢谢

1 个答案: