Question

我知道它很简单，但是更新了rails6。rails6中有新的语法来管理由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和bootstrap

Answer 1

显然暴露加载程序1.0.0具有不同的格式：

environment.loaders.append('jquery', {
  test: require.resolve('jquery'),
  rules: [
    {
      loader: 'expose-loader',
      options: {
        exposes: ['$', 'jQuery'],
      },
    },
  ],
});

Answer 2

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

npm install --save redux

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

case $a in
   *[A-Za-z0-9_]*) x='\\hspace{2cm}';;
   *)              x=$a;;
esac
sed -i "s/#b/$x/g" source.tex

用于导入yarn add jquery中与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'
}));

module.exports = environment;

Answer 3

确保已安装纱线并将其更新为最新版本，然后创建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服务器。

应该可以。

Answer 4

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

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

yarn add jquery

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

直接更新基础配置：

// 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

使用自定义配置并将其合并到基本配置：

// 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'
    })
  ]
}

我认为第二种方式更灵活

Answer 5

在命令下方运行以添加jQuery。

$ yarn add jquery

在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！

如何在Rails 6中添加JavaScript第三方插件

5 个答案: