使用Shopify Slate主题的jQuery

Question

我正在使用Shopify Slate 1.0.0-beta.15来构建自定义Shopify主题。

我已将jQuery添加为节点模块，并将其包含在我的theme.js文件中：

import $ from 'jquery';

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

** 更新 **

slate.config.js文件：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  'cssVarLoader.liquidPath': ['src/snippets/css-variables.liquid'],
  'webpack.extend': {
    resolve: {
      alias: {
        jquery: path.resolve('./node_modules/jquery'),
        'lodash-es': path.resolve('./node_modules/lodash-es'),
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        "window.jQuery": "jquery",
        "window.$": "jquery"
     })
    ]
  }
};

这在js文件中使用jQuery时工作正常，但是当我尝试在模板文件中使用jQuery时，我得到以下控制台错误：

Uncaught ReferenceError: $ is not defined

如何在模板页面中使用jQuery？我知道我可以将它包含在我的页面头中，但如果可能的话，我更愿意坚持使用包管理。

Answer 1

您需要将jQuery公开到全局范围。

您可以在webpack配置中添加以下内容：

module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [
        {
          loader: 'expose-loader',
          options: 'jQuery'
        }
      ]
    }
  ]
},