Rails项目jQuery异常加载及selectize()未定义问题排查求助

jQuery残留与多次加载问题 #

全量jQuery加载位置清单 #

• app/assets/javascripts/ 下的所有js文件，包括通过Sprockets加载的第三方gem自带的jQuery资源，你查到的1.6版本jQuery大概率来自该路径下的旧版内置资源
• app/javascript/packs/ 下的所有入口文件，不止application.js
• config/webpack/ 下的webpack配置，你当前用的webpack.ProvidePlugin会自动给所有用到$、jQuery的模块注入jquery依赖，不需要手动require，只要node_modules内存在jquery包就会被打包
• 布局文件app/views/layouts/内直接写的script标签引入的CDN jQuery
• 其他npm包的子依赖：你安装的easy-autocomplete、selectize本身都依赖jQuery，执行yarn remove jquery只会删除你项目直接声明的jQuery，子依赖的jQuery仍会被自动安装到node_modules中，这就是你执行yarn list仍能查到jQuery的原因

你总结的三个现象的对应解释：

1. yarn remove只会移除项目package.json中直接声明的依赖，若其他依赖包依赖jQuery，yarn会自动将jQuery作为子依赖留存，不会被删除
2. webpack的ProvidePlugin的作用就是自动注入jQuery到所有匹配模块，无需手动在application.js里引入，只要node_modules中存在jQuery包就会被打包
3. 1.6版本的低版本jQuery属于Sprockets体系加载的资源，和webpack体系无关，你可以检查app/assets/javascripts/application.js的Sprockets manifest中是否有//= require jquery类语句，或是否有未列出的依赖gem内置了jQuery

selectize() is not defined 问题解决 #

该问题是因为Selectize需要挂载到全局jQuery对象上才能生效，webpack默认模块化加载不会自动暴露全局jQuery，按以下步骤修改即可：

1. 修改config/webpack/environment.js的ProvidePlugin配置，调整jQuery路径并暴露到window全局：

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

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

module.exports = environment;

2. 在app/javascript/packs/application.js中显式引入selectize：

import 'selectize/dist/js/selectize.min.js'

同时在样式文件中引入selectize的对应样式：

@import "selectize/dist/css/selectize.default.css";

3. 适配Turbolinks的加载逻辑，初始化代码要放在turbolinks加载完成的事件回调中：

document.addEventListener('turbolinks:load', function() {
  $('.你的选择器元素').selectize();
});

4. 先清理掉1.6版本的旧jQuery加载逻辑，避免多版本jQuery冲突导致Selectize挂载到错误的jQuery实例上。

内容的提问来源于stack exchange，提问作者tkhobbes