在 Shopware 6 中更新 jQuery 版本

Question

我正在工作的項目需要第三方 javascript 片段，該片段依賴於“完整”jQuery 框架。 Shopware (/bootstrap 4) 目前隨 jQuery 開箱即用，但使用的是 Slim（而非完整）版本。

有沒有辦法升級/更改使用的 jQuery 版本？

Answer 1

在您的插件中創建webpack.config.js目錄結構應如下所示：

├── MyPlugin
│   └── src
│       └── Resources
│           └── app
│               └── storefront
│                   ├── build
│                   │   └── webpack.config.js
│                   └── src
│                       └── main.js

webpack.config.js的內容：

const { join, resolve } = require('path');

module.exports = () => {
    return {
        resolve: {
           alias: {
               '@jqueryNew': resolve(
                   join(__dirname, '..', 'node_modules', 'jquery'),
               ),
           },
        },
    };
};

然后在storefront目錄中安裝最新版本的 jquery 或您需要的任何特定版本：

npm install jquery

然后，在您的main.js ，您可以從解析的別名中導入較新的 jquery package 並將其設置為全局：

import $ from '@jqueryNew';

window.$ = window.jQuery = $;
global.$ = global.jQuery = $;

Answer 2

jQuery 將在下一個主要版本中移除。 仍然使用它不是面向未來的。 您應該尋找替代方案，默認 javascript 並不復雜

Answer 3

實際上可以用完整版替換纖薄的 jQuery。

在MyPlugin/src/Resources/app/storefront/build/webpack.config.js中放入以下內容：

const path = require('path');
const projectRootPath = process.env.PROJECT_ROOT
    ? path.resolve(process.env.PROJECT_ROOT)
    : path.resolve('../../../../../../../');

const shopwarePlatformPath = projectRootPath + '/vendor/shopware/platform/';
const nodeModulesPlatformPath = shopwarePlatformPath + '/src/Storefront/Resources/app/storefront/node_modules/';

const shopwarePath = projectRootPath + '/vendor/shopware/';
const nodeModulesPath = shopwarePath + '/storefront/Resources/app/storefront/node_modules/';

let webpack = null;
let fullPath = null;
try {
  require.resolve("webpack");
  webpack = require('webpack');
} catch (e) {
  try {
    require.resolve(nodeModulesPlatformPath + "/webpack");
    webpack = require(nodeModulesPlatformPath + '/webpack');
    fullPath = nodeModulesPlatformPath;
  } catch (e) {
    require.resolve(nodeModulesPath + "/webpack");
    webpack = require(nodeModulesPath + '/webpack');
    fullPath = nodeModulesPath;
  }
}

let webpackConfig = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /jquery\.slim/,
      fullPath + 'jquery/dist/jquery'
    ),
    new webpack.NormalModuleReplacementPlugin(
      /jquery\/dist\/jquery\.slim/,
      fullPath + 'jquery/dist/jquery'
    ),
  ],
};
module.exports = function () { return webpackConfig };

Answer 4

小的附加信息：

如果您更改 ypour 插件中的 webpack.config.js ，請確保之后構建前端：

bin/build-storefront.sh