JS(ECMAScript)のlinterとしては、ESLintがあります。
しかしながら webpack*er* 環境下でこいつをしっかり動かそうとしてハマりました。
しっかりというのは、ESLintのairbnbルールのことなのですが、
こいつはimport先の存在性確認とかが必須になるようです。(import/no-extraneous-dependencies)
で、ESLint自体はこれを処理できないのですが、プラグインで拡張すればできるわけです。(eslint-plugin-import)
ESLintがwebpack環境でそれをやるには eslint-import-resolver-webpackを使うのが良さそうなのですが、
さて、コイツ、webpack.config.js を必要とします。
しかし、Railsプロジェクトには、webpack.config.js がありません。
コマッタ！
webpack.config.js をひねり出す
で、色々調べたところ、参考になる記事を見つけました。
https://system.blog.uuum.jp/entry/2019/04/12/111803
webpackerがwebpackをwrapする手法としては割合シンプルで、
結局は、config/webpack/[RAILS_ENV].js が求めるconfigの[Object]のようです。
ESLintを動かす文脈に戻ると、例えばdevelopment環境ならこう書けばいいはず。
で、実際動きました！
module.exports = {
env: {
browser: true
},
parserOptions: {
sourceType: 'module'
},
settings: {
'import/resolver': {
webpack: {
config: './config/webpack/development.js'
}
}
}
}
ということはwebpackのデフォルト設定ファイル名でファイルを置いてあげて、上手く切り替えてあげれば、
webpackに依存するツールセットからは、設定ナシで正しく見えるのではないだろうか？
つまりこう。
let env = process.env.RAILS_ENV || 'development'
module.exports = require(`./config/webpack/${env}.js`)
module.exports = {
env: {
browser: true
},
parserOptions: {
sourceType: 'module'
},
settings: {
// 設定ファイルの指定を省略
'import/resolver': 'webpack'
}
}
うごきます！！
プロジェクト構成に根差した複雑なlintもちゃんと走るので、とても良い感じ。
あと、この手法は、今後webpackに依存するような複雑なツールを入れる時にも、設定ファイルの位置を毎回指定しないで済むので、嵌り要素が減って良さそう！
前略、Railsの上より (あとがき)
TL;DR
Rails側からフロントエンド資産を利用方法として、"なんちゃら-rails"みたいなgemで入れるのがスタンダードだった時期がありましたが、それも今は昔1。
JSが一つの言語系として隆盛するにしたがって、JSの資産はJSでhostされるようになり、
これを利用するためにはJSのビルドシステムと付き合うしかなくなりました。
で、Rails5からwebpacker2という、フロントエンドライブラリの資産をRailsでも使えるヤツーが導入されました3。
webpackerは、RailsのフロントエンドビルドシステムであるSprocketとwebpackをRubyからするといい感じに協働させてくれるのですが、
Railsプロジェクトのconventionに合わせるために、config構成がちょっと普通と違う感じになっています。
で、それをみて、僕は勝手にJS側のツールと相性がイマイチだと思ってしまった4ワケなんですが、
解決策としては意外とシンプルなものが得られたので、記事にしました。
webpackerとガチで向き合うの今までつらかったんですが、整合性のある設定ファイルが存在することが理解出来たら、そこまでツライ相手でもないかもしれないですね、コレ。