webpack - VueJS Single File Component med typescript: Kan ikke finde modulet stuff.vue

Jeg har en simpel projektstruktur:

/src/app2/main.ts /src/app2/components/lib.ts /src/app2/components/stuff.vue

Med webpack, vue-loader og ts-loader.

main.ts har:

import Vue = require('vue');
import  Component from './components/lib'

new Vue({
  el: '#app2'

});

Når man forsøger at bygge dette med 1 webpack-indgang for /src/app2/main.ts, opstår den fejl, der genereres,:

ERROR in C:\temp\vuetest2\proj\src\app2\components\lib.ts
(2,25): error TS2307: Cannot find module './stuff.vue'.

ERROR in ./src/app2/main.ts
Module not found: Error: Can't resolve './components/lib' in 'C:\temp\vuetest2\proj\src\app2'
 @ ./src/app2/main.ts 3:12-39

Hvis jeg ændrer indgangspunktet til src/app2/components/lib.ts, vil det bygge. Jeg forstår ikke, hvorfor main.ts ikke vil bygge.

Indholdet af lib.ts:

import Vue = require('vue');
import Stuff  = require('./stuff.vue');


let o = {
   Stuff
}

let componentLibrary = {
  components: o,
  registerExternal: function(v:any) {
    for(var k in o) {
        v.component(o[k].name, o[k]);
    }
  },
  registerInternal: function() {
    for(var k in o) {
        Vue.component(o[k].name, o[k]);
    }
  }
}

export default componentLibrary;

Stuff.vue er bare en simpel enkeltfil Vue-komponent.

Svar #1

Ifølge: https://github.com/vuejs/vue-class-component/blob/master/example/webpack.config.js

Prøv at tilføje appendTsSuffixTo ts-loader indstilling i din webpack.config.js

webpack2

{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    use: [{
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        }]
},

Svar #2

Du kan referere til denne PR på GitHub. Faktisk er det ikke en fejl, bare et brugsmæssigt problem.

Jeg antager, at du ønsker at skrive SFC med <script lang="ts">, <script lang="tsx">, *.ts til hjælpefunktioner og klasser, og *.tsx til funktionelle rene komponenter.

ts-loader accepterer kun *.ts eller *.tsx filer til at kompilere (ellers vil det forårsage en fejl, der siger filen ikke findes). Så ts-loader har to muligheder: appendTsSuffixTo og appendTsxSuffixTo. Disse to muligheder accepterer et array af regexp for at matche, hvilke filer du ønsker at kompilere. (Her giver vi ts-loader de *.vue filer, der allerede er behandlet af vue-loader, til at kompilere).

Jeg antager, at du bruger *.ts.vue til <script lang="ts"> SFC vue-fil, mens *.tsx.vue bruges til <script lang="tsx"> SFC vue-fil. ts-loader bør konfigureres som nedenfor:

  {
    test: /\.tsx?$/,
    use: [
      {
        loader: 'babel-loader'
      },
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.ts\.vue$/],
          appendTsxSuffixTo: [/\.tsx\.vue$/]
        }
      }
    ],
    exclude: /node_modules/
  },

Det betyder, at normale *.ts og *.tsx filer, som sendes til ts-loader, vil blive transpileret og derefter sendt til babel-loader for yderligere kompilering. Og andre filer, der ender med .ts.vue, vil blive tilføjet endelsen .ts som *.ts.vue.ts, og filer der ender med .tsx.vue vil blive *.tsx.vue.tsx. Disse filer sendes alle fra vue-loader. Husk, at ts-loader kun accepterer .ts og .tsx filer.

Men vue-loader er ikke smart nok, <script lang="xxx"> vil få vue-loader til at tilføje xxx-loader til yderligere kompilering, og <script lang="tsx"> vil få vue-loader til at tilføje tsx-loader, som ikke eksisterer i verden.

Heldigvis kan vi konfigurere vue-loaders options:

  const loaders = {}
  loaders.tsx = ['babel-loader', 'ts-loader']
  loaders.ts = loaders.tsx
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: { loaders }
  },

Efter at den webpack-konfiguration er færdig. For TSX-support bør du installere nogle JSX-typer og skrive en relateret .d.ts-fil

Du kan tjekke dette repository på GitHub for flere detaljer.

Held og lykke!

Relaterede artikler