1

我已经设置了一个新的 Rails 6 应用程序来使用 tailwindcss，这是我第一次正确地使用 webpack。我正在尝试使用 jquery 并希望确保我的脚本中对 $ 或 jquery 的任何引用都得到正确支持

我已按照安装 jquery-ui 包的说明进行操作，该包要求我创建一个 webpack.config.js 文件，但它似乎不起作用，除非我还在 application.js 中定义 jquery 标记。

虽然这暂时解决了我的问题，但我想确保正确设置 webpack.config.js 以供将来使用。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    index:'./src/index.js'
  },
  output: {
    filename: 'bundled.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath:'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ["style-loader","css-loader"]
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        loader:"file-loader",
        options:{
          name:'[name].[ext]',
          outputPath:'assets/images/'
          //the images will be emited to dist/assets/images/ folder
        }
      }
    ]
  },
  plugins: [
    /* Use the ProvidePlugin constructor to inject jquery implicit globals */
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery'",
        "window.$": "jquery"
    })
  ]
};

应用程序.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require('webpack-jquery-ui');

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

包.json

{
  "name": "www",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "webpack-jquery-ui": "^2.0.1",
    "tailwindcss": "^1.0.3",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.7.0"
  }
}
4

1 回答 1

0

如果您使用节点模块安装 jquery，那么路径“jquery/src/jquery”表示安装在 node_modules 目录中的 jquery 具有子目录“jquery/src”并且其中包含 jquery.js 文件。

new webpack.ProvidePlugin({
  $: 'jquery/src/jquery',
  jQuery: 'jquery/src/jquery'
})

我用这个解决了我的问题。希望这会有所帮助。

参考：https ://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker在此处输入链接描述

于 2020-01-22T05:53:49.687 回答