时间戳

首页 > 解决方案 > webpack encore symfony4 中的引导程序和 jquery

php - webpack encore symfony4 中的引导程序和 jquery

问题描述

我想使用 webpackEncore 将 bootstrap 和 jquery 包含到 symfony 4 项目中，但我不想使用 cdn 脚本，我确实想使用下载的文件......所以，在将 encore 安装到项目后，我把 bootstrap和资产文件夹中的 jquery 文件，如下图所示： 在此处输入图像描述

然后，在 webpack.config.js 中，这些是代码：

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')
    
    // JS
    .addEntry('app', './assets/js/app.js')
    .addEntry('bootstrap_js', './assets/js/bootstrap.js')
    .addEntry('fontawesome_js', './assets/js/fontawesome/fontawesome.js')
    .addEntry('jquery', './assets/js/jquery-3.3.1.js')

    // CSS
    .addStyleEntry('bootstrap_css', './assets/css/bootstrap/bootstrap.css')
    .addStyleEntry('fontawesome_css', './assets/css/fontawesome/fontawesome.css')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

还有我的模板： 在此处输入图像描述

但是当我运行 encore 时，它​​失败了，它说缺少引导程序所需的依赖项： 在此处输入图像描述

我应该如何解决问题注意：我不想将 cdn 用于 bootstrap 和 jquery ......

标签： phpsymfonywebpackwebpack-encore

解决方案

看起来您已经从 Bootstrap 和 FontAwesome 下载了源文件。您必须下载已编译的缩小版本，以便这些库的所有依赖项都已包含在内。

您应该下载https://getbootstrap.com/docs/4.3/getting-started/download/#compiled-css-and-js并使用bootstrap.min.js和bootstrap.min.css

如果你对 FontAwesome 也有问题，过程应该是相对相同的（以编译后的缩小版本）

注意：你真的应该避免直接下载文件，而是使用包管理器npm或yarn包含你的依赖项，然后将它们导入你自己的 CSS / JS 文件

推荐阅读