Symfony Webpack Encore 集成含第三方依赖的共享Bundle方案

核心逻辑是把共享Bundle的前端源资源纳入Webpack的模块解析体系，不要直接硬引用public目录下的静态文件，从根源消除重复引入依赖的问题，按下面步骤配置就行：

• 第一步：规范共享Bundle自身的前端包结构
  把原来放在public/bundles/thebundlename/下的JS/CSS源文件，统一挪到Bundle根目录下的assets/目录中，在Bundle根目录新建package.json声明自身标识、入口和前端依赖：

  {
    "name": "@your-company/the-shared-bundle",
    "version": "1.0.0",
    "main": "./assets/js/CoreLibrary.js",
    "dependencies": {
      "jquery": "^3.7.1",
      "bootstrap": "^5.3.2",
      "@popperjs/core": "^2.11.8"
    }
  }
  

  public/bundles/目录只存放最终编译输出的静态资源，不要把源文件放在这里当引用入口，Webpack解析这个路径的文件时不会自动追溯内部依赖，这就是你之前需要在每个文件重复写import的核心原因

• 第二步：主项目关联本地Bundle的前端包
  主项目通过Composer安装完共享Bundle后，在主项目根目录的package.json中添加本地依赖，指向vendor目录下的共享Bundle路径：

  {
    "dependencies": {
      "@your-company/the-shared-bundle": "file:./vendor/your-company/the-shared-bundle"
    }
  }
  

  执行yarn install或者npm install后，包管理器会自动把共享Bundle软链到主项目的node_modules目录下，同时自动安装Bundle声明的jquery、bootstrap等第三方依赖，不需要主项目重复手动安装。

• 第三步：配置Webpack Encore自动注入公共依赖
  打开主项目的webpack.config.js，添加别名配置和全局依赖自动注入规则，彻底消除重复import代码：

  const path = require('path');
  Encore
    // 保留你原有的其他Encore配置
    .addAliases({
      '@shared-bundle': path.resolve(__dirname, 'node_modules/@your-company/the-shared-bundle/assets')
    })
    // 自动注入jQuery依赖，所有文件无需手动写import $ from 'jquery'
    .autoProvidejQuery()
    // 自动注入Bootstrap依赖
    .autoProvideVariables({
      'window.jQuery': 'jquery',
      bootstrap: 'bootstrap'
    })
  

• 第四步：简化资源引入代码
  删掉原来写的长相对路径引入、重复的jquery/bootstrap引入代码，主项目的app.js里只需要按包名引入即可：

  // 引入共享Bundle的所有JS、CSS资源
  import '@your-company/the-shared-bundle';
  // 需要使用CoreLibrary时直接引入，不需要额外带依赖声明
  import { CoreLibrary } from '@your-company/the-shared-bundle';
  
  // 实例化使用即可
  const coreLib = new CoreLibrary();
  

避坑说明 #

• 共享Bundle内部的CSS、SCSS资源直接在Bundle的JS入口文件中引入即可，比如在CoreLibrary.js顶部加import 'bootstrap/dist/css/bootstrap.min.css'、import '../css/bundle-custom.css'，Webpack会统一处理编译、拆分，不需要主项目单独重复引入
• 如果之前手动在webpack配置里写过jQuery的ProvidePlugin规则，记得删掉，避免和Encore内置的autoProvidejQuery()冲突导致编译报错
• 这套配置下Webpack会自动遍历依赖树，不会出现重复打包jquery、bootstrap的问题，多项目复用时只需要维护共享Bundle自己的前端依赖版本即可，不需要每个项目单独调整

内容的提问来源于stack exchange，提问作者Diego