Rails 6 + Webpack环境下如何正确引入jquery-textcomplete库？

我之前也碰到过一模一样的问题，核心原因是jquery-textcomplete依赖全局的window.jQuery/window.$对象来挂载自身方法，但默认的Webpacker配置虽然通过ProvidePlugin提供了$和jQuery，却没有把它们暴露到浏览器的全局window对象上，导致插件加载时找不到挂载的目标。

下面是具体的修复步骤：

1. 修改Webpack环境配置 #

编辑webpack/environment.js，调整ProvidePlugin的配置，并确保jQuery被暴露到window：

const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')
const webpack = require('webpack')

// 调整ProvidePlugin，直接指向jquery包，而非src子目录
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  jquery: 'jquery' // 兼容部分插件对模块名的查找
}) )

// 新增：把jQuery和$挂载到window对象，让插件能找到全局实例
environment.plugins.append('ExposeWindowjQuery', new webpack.ProvidePlugin({
  window.jQuery: 'jquery',
  window.$: 'jquery'
}))

environment.loaders.prepend('coffee', coffee)
module.exports = environment

2. 调整application.js的导入顺序 #

确保jQuery先被加载并全局注册，再导入jquery-textcomplete：

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");

// 显式导入jQuery并挂载到window
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 导入jquery-textcomplete
import 'jquery-textcomplete';

3. 验证与Turbolinks注意事项 #

重新编译静态资源：

bin/webpack

如果你的页面使用Turbolinks，记得在turbolinks:load事件中初始化插件（避免页面切换后插件失效）：

document.addEventListener('turbolinks:load', function() {
  // 示例：给id为"comment-input"的元素初始化textcomplete
  $('#comment-input').textcomplete([
    {
      match: /(^|\s)@(\w*)$/,
      search: function(term, callback) {
        // 这里替换成你的搜索逻辑
        callback(['alice', 'bob', 'charlie'].filter(name => name.startsWith(term)));
      },
      replace: function(name) {
        return `$1@${name} `;
      }
    }
  ]);
});

为什么CDN能正常工作？ #

CDN引入的jQuery是直接挂载到window对象上的，jquery-textcomplete加载时能直接找到全局的$，自然能成功挂载textcomplete方法；而Webpack默认会把模块包裹在独立的作用域中，不主动暴露到全局，所以就出现了找不到方法的错误。

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