ESlint入りVue.jsのScript内でjQueryを使いたい【非推奨】
前置き
基本的にVue等のモダンフレームワーク内での外部スクリプトの使用は推奨されないので、可能な限りやめましょう。
理由としては
- せっかくフレームワークで効率的にライブラリを管理してるのに、外部スクリプトを使うことでリソースが膨れ上がる
- 外部スクリプトの影響でフレームワークで管理する依存関係解決に支障をきたす恐れがある
- 特にjQueryはDOMを直接操作するので、仮想DOMとの整合性がとれず動作が破綻する恐れがある
ちなみにjQueryはnpmとかyarnを使って管理することも可能。今回はあえてローカルに落としたjQueryを使う方法について説明する。
やり方
例えば、App.vueで以下のようにしたいとする。
<script>
import $ from "@/assets/js/jquery-3.3.1.min.js";
export default {
name: "Home",
props: {
msg: String
},
};
</script>
ESlintが正常に動作していると、この時点でlintの制限に引っかかってバチボコに怒られる。
ESlint自体を切りたくはないので、指定ファイルをLint対象外にする方法で対応する。
ルートディレクトリに.eslintignore
を作成し、以下を記述する。
/src/App.vue