如何将Rails项目中select2.js的依赖从Sprockets迁移至Webpacker

我帮你梳理下从Sprockets切换到Webpacker后，如何让select2正常工作的完整步骤——毕竟Webpacker的模块化思路和Sprockets的asset pipeline差异不小：

• 第一步：用Yarn安装前端依赖
  既然换了Webpacker，就别再用gem管理前端库了，直接用Yarn安装jQuery和select2：

  yarn add jquery select2
  

• 第二步：配置Webpack让jQuery全局可用
  select2依赖全局作用域的$和jQuery，所以得在Webpack配置里把jQuery暴露出来。编辑config/webpack/environment.js，添加ProvidePlugin配置：

  const { environment } = require('@rails/webpacker')
  const webpack = require('webpack')
  
  // 让jQuery全局可用
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery'
    })
  )
  
  module.exports = environment
  

• 第三步：引入select2的样式
  别漏了select2的CSS，在你的主样式文件（比如app/javascript/stylesheets/application.scss，如果没有就新建一个）里导入：

  @import "select2/dist/css/select2";
  

  要是之前没配置过SCSS支持，得先装依赖：

  yarn add sass sass-loader
  

• 第四步：初始化select2（兼容Turbolinks）
  你之前用CoffeeScript写的初始化逻辑，现在可以迁移到Webpacker的目录下。比如在app/javascript/packs里新建select2_init.js.coffee：

  $(document).on 'turbolinks:load', ->
    # 加个判断避免Turbolinks缓存导致重复初始化
    $('select').not('.select2-hidden-accessible').select2()
  

  然后在app/javascript/packs/application.js里导入这个初始化文件：

  import 'select2'
  import './select2_init'
  

  要是项目还保留其他CoffeeScript代码，记得装对应的loader支持：

  yarn add coffeescript coffeescript-loader
  

• 第五步：验证配置并测试
  重启你的Rails服务器和Webpack dev server（如果用了bin/webpack-dev-server），然后访问页面，检查select元素是否正常渲染select2样式、能否正常交互。

另外要注意：之前放在vendor/assets/javascripts里的select2文件可以删掉了，现在用Yarn安装的包会被Webpack自动管理，能避免版本冲突和重复引入。

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