じまろぐ

めめ

Vueコンポーネントのビルド時に不要な属性をtemplateから取り除く

テスト用にdata-test属性を使ってる

VueコンポーネントのテストをJest + vue-test-utilsで書いてる。

dataとかpropsの値によって状態が変化する要素のテストをするとき、要素の特定のためにクラス名使うといろいろ大変だからテスト用にdata-test属性を使ってる。

blog.kentcdodds.com

data-test属性を消したい

テストするときには便利だけど、あくまでテスト用で、リリースするときには消しておきたい。

特定の属性を消すReact用のbabelプラグインがあったけど、Vue用のは見つけられなかった。代わりにフォーラムで見つけたのがこれ。

forum.vuejs.org

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.jsbuild.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
          }
        }]
      }
    },
  }
}