在 Rails 5.2 中使用 Yarn 导入 jQuery 插件

Question

我使用 yarn add jquery-asScrollable 安装我的插件。我现在可以在 package.json 文件中看到它：

{
  "name": "test_app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.2.0",
    "coffeescript": "1.12.7",
    "jquery-asScrollable": "^0.4.10"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.11.0"
  }
}

但是如何在我的应用程序中启用它？我试过这样导入它：

application.js

//= require jquery-asScrollable

packs/application.js

import asScrollable from 'jquery-asScrollable'

但显然你不是这样做的。

Answer 1

只有安装了 gem 才能执行此操作，但我不确定此软件包是否有 gem。所以这是错误的你应该删除它。

//= require jquery-asScrollable

根据这个 link, - https://www.npmjs.com/package/jquery-asScrollable jquery-asScrollable requires the latest version of jQuery, jquery-asScollbar.

您可以通过将文件 custom.js 添加到您的 config/webpack 文件夹来将 jQuery 添加到您的 webpack 配置：

这是我使用 Bootstrap 4 的配置：

const webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('bundle.css');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: extractCSS.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
      }
    ]
  },
  plugins: [
    // extractCSS,
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      tether: 'tether',
      Tether: 'tether',
      'window.Tether': 'tether',
    })
  ]
}

将custom.js添加到webpack文件夹后，你可以像这样将其添加到environment.js文件中，这样就可以在开发和生产环境中使用了。 environment.config.merge(customConfig)

但另一种更简单、更简单的方法是查找这些包的 CDN，并将它们添加到您的 layout/application.html.erb 文件中，仅适用于您的开发环境。这是 jquery-asScrollbar 的 CDN，例如 - https://cdnjs.com/libraries/jquery.scrollbar，复制您想要的版本的 link，并将其添加到 header 部分。

如果您按照所有说明进行操作并且 jQuery 已经安装。当然，您必须已经安装了 tether 和 jQuery 以及 yarn add jquery tether。您可以通过将 const jqueryAsScrollbar = require('jquery-asScrollable') 添加到 app/javascript/packs/application.js 来使用 jquery-asScrollable，然后您需要将 <%= javascript_pack_tag 'application' %> 添加到 rails layouts/application.html.erb

希望这对您有所帮助。

在 Rails 5.2 中使用 Yarn 导入 jQuery 插件

Importing a jQuery plugin using Yarn in Rails 5.2

jquery

ruby-on-rails

webpack

yarnpkg