在没有代码重复的情况下将Webpacker与jQuery结合使用

Question

我想创建一个Rails 5项目而不使用React这样的框架。但是我想使用jQuery，也想在jQuery中使用Yarn来管理我的依赖项。

Webpacker文档说明了React等框架的用法：

 rails new myapp --webpack=react

app/javascript:
  ├── packs:
  │ 
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg 

<%= javascript_pack_tag 'application' %>

./bin/webpack and ./bin/webpack-dev-server

我找到了说明如何与jQuery和rails-ujs一起使用的文档。但是它同时使用了Webpacker和Assets Pipeline，这对我来说毫无意义：

yarn add jquery
rails yarn:install
gem 'jquery-rails'
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
rails webpacker:install

“ yarn add”会将jQuery添加到Yarn全局缓存中：

$ yarn cache list | grep jquery
jquery  3.4.0 npm https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf

那么为什么我们需要再次通过Rails安装jQuery？这里是极端的代码重复。使用Yarn的目的是避免直接通过Ruby管理gem。

Answer 1

你是对的，那没有道理。

//= require jquery不适用于webpackER。

yarn add会将软件包添加到node_modules，您可以在package.json文件中看到这些软件包。

尝试使用yarn add添加以下软件包：

• https://www.npmjs.com/package/jquery
• https://www.npmjs.com/package/jquery-ujs（请注意破折号，而不是_）
• https://www.npmjs.com/package/turbolinks

然后，在application.js或/packs下的另一个文件中：

import 'jquery';
import 'jquery-ujs';
var Turbolinks = require("turbolinks");
Turbolinks.start(); // https://www.npmjs.com/package/turbolinks#installation-using-npm

这应该使您到达所有库都在资产管道上运行的状态。