19

我知道它很简单，但随着 rails 6 的更新。rails 6 中有用于管理由 webpacker 维护的 javascript 资产的新语法。

//application.js
require("@rails/ujs") //.start()
require("turbolinks").start()
require("@rails/activestorage").start()
require('jquery').start()
require('jquery_ujs').start()
require('bootstrap-daterangepicker').start()
require("custom/custom").start()
require("bootstrap").start()
require("channels")

我可以添加custom/custom，但引导程序和 jquery 不工作我已经通过 npm 安装 jquery 和引导程序

4

5 回答 5

27

运行以下命令以添加 jQuery。

$ yarn add jquery

在下面添加代码config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

在 application.js 文件中需要 jquery。

require('jquery')

不再需要添加 jquery-rails gem！

于 2019-05-15T13:51:41.730 回答
17

解决 jquery 第三方插件问题通过 yarn 添加 jquery

yarn add jquery

要在 rails 6 应用程序中添加 jquery 支持，首先我们需要添加以下配置

# app/config/webpack/environment.js
const {environment} = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery' # or if its not work specify path `'jquery/src/jquery'` which node_modules path for jquery
}));

module.exports = environment;

用于导入任何与 jquery 相关的插件app/javascripts/packs/application.js

使用以下说明

import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-daterangepicker/daterangepicker'

expose-loader用jQuery更新

yarn add expose-loader

然后将其添加到 config/webpack/environment.js

   environment.loaders.append('jquery', {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: '$',
      }, {
        loader: 'expose-loader',
        options: 'jQuery',
      }],
    });
    module.exports = environment;
于 2019-02-27T13:49:32.480 回答
3

显然，expose-loader 1.0.0 有不同的格式：

environment.loaders.append('jquery', {
  test: require.resolve('jquery'),
  rules: [
    {
      loader: 'expose-loader',
      options: {
        exposes: ['$', 'jQuery'],
      },
    },
  ],
});
于 2020-06-26T07:34:17.783 回答
1

确保您已安装 yarn 并更新到最新版本，然后创建您的 rails 应用程序。

首先运行以下命令安装 Bootstrap、Jquery 和 Popper.js

yarn add bootstrap@4.5 jquery popper.js

当然，您可以更改为最新版本的 Bootstrap。

如果你打开 package.json 文件，你会注意到 Bootstrap 4.5、Jquery 最新版本和 Popper.js 最新版本已经为你添加了。

接下来转到 config/webpack/environment.js 并修改文件。

const { environment } = require('@rails/webpacker')
    
const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment

接下来转到 app/assets/stylesheets/application.css 并修改文件确保需要引导程序。

*= require bootstrap

*= require_tree .

*= require_self

最后转到 application.js 文件并通过添加来修改文件import 'bootstrap';，以便引导 javascript 工作。

import 'bootstrap';
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

保存所有更改，重新启动 rails 服务器。

那应该行得通。

于 2020-07-11T04:40:32.873 回答
1

在 webpacker v. 6 中没有config/webpack/environment.js其他文件结构

首先，您需要使用以下命令将 JQuery 添加到您的项目中yarn：

yarn add jquery

之后，您可以使用以下一种方式集成 JQuery：

  1. 直接更新基本配置：
// config/webpack/base.js

const { webpackConfig } = require('@rails/webpacker')
const webpack = require('webpack')

webpackConfig.
  plugins.
  push(
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

module.exports = webpackConfig
  1. 使用自定义配置并将其合并到基本配置：
// config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

// config/webpack/custom.js

const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

我认为第二种方式更灵活

于 2021-04-02T17:40:20.410 回答