Vueコンポーネントのビルド時に不要な属性をtemplateから取り除く
追記(2019/02/12)
テスト用にdata-test属性を使ってる
VueコンポーネントのテストをJest + vue-test-utilsで書いてる。
data
とかprops
の値によって状態が変化する要素のテストをするとき、要素の特定のためにクラス名使うといろいろ大変だからテスト用にdata-test
属性を使ってる。
data-test属性を消したい
テストするときには便利だけど、あくまでテスト用で、リリースするときには消しておきたい。
特定の属性を消すReact用のbabelプラグインがあったけど、Vue用のは見つけられなかった。代わりにフォーラムで見つけたのがこれ。
vue-loaderのオプションで属性消せるよとのこと。
次のコードはフォーラムのコードからNODE_ENV
の値見てるとことlodash依存を排除したやつ。
{ compilerModules: [{ preTransformNode(astEl) { const { attrsMap, attrsList } = astEl if (attrsMap['data-test']) { delete attrsMap['data-test'] const index = attrsList.findIndex(x => x.name == 'data-test' ) attrsList.splice(index, 1) } return astEl } }] }
これでdata-test
属性が消えて万歳🎉
nuxt.jsで同じことしたい
nuxt.config.js
のbuild.extend
でvue-loaderのオプションを指定する。
module.exports = { build: { extend (config, ctx) { if (!ctx.isDev) { const vueLoader = config.module.rules.find(rule => rule.loader === 'vue-loader') vueLoader.options.compilerModules = [{ preTransformNode(astEl) { const { attrsMap, attrsList } = astEl if (attrsMap['data-test']) { delete attrsMap['data-test'] const index = attrsList.findIndex(x => x.name == 'data-test' ) attrsList.splice(index, 1) } return astEl } }] } }, } }