53885


Vue.js [説明書](https://vue-loader.vuejs.org/guide/pre-
processors.html#typescript)に依ると、単独ファイルコンポネント(.vueファイル)でpugプレプロセッサーを利用するには[pug-
loader](https://github.com/pugjs/pug-loader)ではなく、[pug-plain-
loader](https://www.npmjs.com/package/pug-plain-loader)が要ります:

[code]

    {
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    }
    
[/code]

単独ファイルコンポネント(.vueファイル)に加えて、[vue-property-
decorator](https://github.com/kaorun343/vue-property-decorator)（[vue-class-
component](https://github.com/vuejs/vue-class-
component)基づき）に確保されているTypeScriptクラスに使いたいなら、どうやってWebpackを設定すれば良いですか?

vue-property-decoratorのクラスにHTML基本テンプレートがインポートされたような
[例](https://qiita.com/hako1912/items/8d9968d07748d20825f8#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B)しか見た事がありません:

[code]

    @Component({
      template: require('./MyComponent.html')
    })
    export default class MyComponent extends Vue {
        //...
    }
    
[/code]

代わりに、Pugをインポートしたいなら、どうすれば良いですか？

[code]

    @Component({
      template: require('./RegularButton.pug')
    })
    export default class RegularButton extends Vue {
        //...
    }
    
[/code]

この場合は、pug-plain-loaderは役に立ちません:

[code]

    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    > <button @click="onClickEventHandler">{{ lettering }}</button>
     @ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
     @ ./SPA_Test.ts
    
[/code]

pug-loaderを導入しなければいけないという意識はありますが、pug-plain-
loaderとコンフリクトが起きないように、どうやって設定すれば宜しいですか?

[code]

    // ...
    module: {
      rules: [
        {
          test: /\.ts?$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        },
        {
          test: /\.json5$/,
          loader: 'json5-loader'
        },
        {
          test: /\.(yml|yaml)$/,
          use: ['json-loader', 'yaml-loader']
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.pug$/,
          loader: 'pug-plain-loader'
        }
      ]
    }
    
[/code]

## 不十分な解決

[pug-plain-loader](https://github.com/yyx990803/pug-plain-
loader)の仕様書に依ると、`.vue`ではないファイルに`.pug`をインポートするには、`raw-loader`が要ります：

[code]

    {
      module: {
        rules: [
          {
            test: /\.pug$/,
            oneOf: [
              // JavaScript(そしてTypeScript)にとって有効
              {
                exclude: /\.vue$/,
                use: ['raw-loader', 'pug-plain-loader']
              },
              // <template lang="pug">にとって有効
              {
                use: ['pug-plain-loader']
              }
            ]
          }
        ]
      }
    }
    
[/code]

残念ながら、これだけで足りない様です：

[code]

    NonErrorEmittedError: (Emitted value instead of an instance of Error) 
    
      Errors compiling template:
    
      text "export default "" outside root element will be ignored.
    
      1  |  export default "<div class=\"container\"><h1>{{ pageTitle }}</h1><hr><div><div>V-Model Test：</div><div>{{ vModelTestProperty }}</div><div><input type=\"text\" v-model=\"vModelTestProperty\"></div></div><hr><div><div>{{ defaultTextLabel }}</div><div><RegularButton :lettering=\"&quot;Non default button text&quot;\" :onClickEventHandler=\"executeTest\"></RegularButton></div></div></div>"
         |  
    
        at Object.emitError (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\webpack\lib\NormalModule.js:165:14)
        at Object.module.exports (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\vue-loader\lib\loaders\templateLoader.js:61:21)
     @ ./SPA_Test.vue?vue&type=template&id=cabf1cca&lang=pug& 1:0-422 1:0-422
     @ ./SPA_Test.vue
     @ ./SPA_Test.ts
    
[/code]

コンポネント：

[code]

    <template lang="pug">
      .container
    
        h1 {{ pageTitle }}
        hr
    
        div
          div V-Model Test：
          div {{ vModelTestProperty }}
          div: input(type='text' v-model='vModelTestProperty')
        hr
    
        div
          div {{ defaultTextLabel }}
          div: RegularButton(:lettering='"Non default button text"' :onClickEventHandler='executeTest')
    </template>
    
    
    <script lang="ts">
    
      import { Vue, Component, Prop } from 'vue-property-decorator'
    
      @Component
      export default class SPA_Test extends Vue {
    
        private pageTitle: string = 'SPA関連本文';
        private vModelTestProperty: string = '入力された文字はここに表示されます';
        private defaultTextLabel: string = '規定本文';
    
        public executeTest(): void {
          console.log('試験、正常。');
        }
      }
    </script>
    
[/code]

下記の設定では、全部正常に動いています：

[code]

    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    }
    
[/code]

・・・但し、`vue-property-decorator`のクラス以内、`pug`が利用できません：

[code]

    import { Vue, Component, Prop } from 'vue-property-decorator';
    
    @Component({
      //template: require('./RegularButton.pug') // エラー発生！
      template: '<button @click="onClickEventHandler">{{ lettering }}</button>'
    })
    export default class RegularButton extends Vue {
    
      @Prop({default: '規定本文', type: String}) private readonly lettering!: string;
      @Prop({default: (): void => {}, type: Function}) private readonly onClickEventHandler!: () => {};
    }
    
[/code]

使えるようになるには、どうすれば良いですか？


CC BY-SA 4.0
2019-03-14T01:50:19.090
53414
2020-12-12T06:13:47.957
2020-12-12T06:13:47.957
32986
16876
question
vue.js typescript webpack pug
単独ファイルコンポネント（.vueファイル）にも、vue-class-componentのクラスにもpugプレプロセッサーを利用出来るようなWebpack設定


私の場合は、これで動いてくれました：

[code]

    {
        test: /\.pug$/,
        oneOf: [{
            resourceQuery: /^\?vue/,
            use: ["pug-plain-loader"]
        }, {
            use: [
                "html-loader",
                "pug-html-loader"
            ]
        }]
    }
    
[/code]


CC BY-SA 4.0
2019-04-03T06:19:01.860
53885
2019-04-03T06:19:01.860
16876
53414
answer