Importazione di file html con caricatore di stringhe modello es6

Question

Desidero importare i miei modelli nel mio js con es6 template string loader. L'unica differenza nel mio caso è che non voglio includere css, solo html. Il mio codice è il seguente:

import app from '../../bootstrap.js'; 
import template from './header.html'; 

app.component('siteHeader', { 
    template 
}); 

e il mio errore è Uncaught SyntaxError: Unexpected token export.

Answer 1

Recentemente ho avuto bisogno di fare la stessa cosa, ed è così che l'ho fatto.

1. Ho usato il modulo NPM html-loader, invece di es6-template-string-loader

2. Aggiungi al webpack.config.js

Webpack 3

... 
module: { 
    rules: [ 
     { 
      test: /\.html$/, 
      exclude: /node_modules/, 
      use: {loader: 'html-loader'} 
     } 
    ] 
} 
... 

Webpack 1 (deprecato, ma dall'originale risposta):

... 
module: { 
    loaders: [ 
     { 
      test: /\.html$/, 
      loader: "html-loader" 
     } 
    ] 
} 
... 

3. utilizzare per le file JS

import template from './header.html'; 

Answer 2

Presumo vostro webpack.config.js è lungo le linee di questo:

... 
module: { 
    loaders: [ 
     { 
      test: /\.html$/, 
      loader: "es6-template-string" 
     } 
    ] 
} 
... 

Il problema è che template-string-loader uscite una funzione modello di stringa utilizzando esportata Sintassi ES6. Avrai ancora bisogno di passarlo attraverso Babele.

La configurazione dovrebbe apparire qualcosa di simile:

... 
module: { 
    loaders: [ 
     { 
      test: /\.html$/, 
      loader: "babel?presets[]=es2015!es6-template-string" 
     } 
    ] 
} 
... 

Per utilizzarlo è necessario chiamare è in funzione:

import app from '../../bootstrap.js'; 
import template from './header.html'; 

app.component('siteHeader', { 
    template() 
}); 

Answer 3

considerare l'utilizzo di Raw Loader.

La configurazione webpack conterrà questo:

... 
    module: { 
     rules: [ 
      { 
       test: /\.tpl.html$/, 
       use: 'raw-loader' 
      } 
     ] 
    } 
... 

Nella tua scrittura di codice

import tpl from './mytemplate.html'; 

Answer 4

Prova

module: { 
      loaders: [ 
      { 
       test: /\.html$/, 
       loader: 'html-loader?exportAsEs6Default', 
      } 
     ] 
    } 

Maggiori informazioni su questa sintassi di configurazione si può leggere in html-loader repo readme

https://github.com/webpack-contrib/html-loader#export-formats

Answer 5

userei raw-loader invece di text-loader, perché ha molto di più collaboratori ed è ufficialmente indicato sulla documentazione webpack: https://webpack.js.org/loaders/raw-loader/

Si tratta di una scelta più sicura sul lungo periodo.Link per il download: https://www.npmjs.com/package/raw-loader

webpack.config.js

module.exports = { 
     module: { 
     rules: [ 
      { 
      test: /\.(tpl|txt)(\?.*)?$/, 
      use: 'raw-loader' 
      } 
     ] 
     } 
    } 

Ora, posso usarlo per caricare un file di modello come una stringa per le mie componenti, come:

import Vue from 'vue' 
import MyTemplate from './template.tpl' 

Vue.component('my-component',{ 
    'template' : MyTemplate 
})