Importowanie plików HTML za pomocą kreatora łańcucha szablonów es6

Question

Chcę zaimportować moje szablony do mojego js z es6 template string loader. Jedyną różnicą w moim przypadku jest to, że nie chcę włączać css, tylko html. Mój kod wygląda następująco:

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

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

i mój błąd jest Uncaught SyntaxError: Unexpected token export.

Answer 1

Niedawno musiałem zrobić to samo i tak to zrobiłem.

1. kiedyś moduł npm html-loader zamiast es6-template-string-loader

2. Dodaj do webpack.config.js

WebPACK 3

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

WebPACK 1 (wycofany, ale z oryginału odpowiedź):

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

3. Zastosowanie w plikach JS

import template from './header.html'; 

Answer 2

I zakładamy webpack.config.js jest wzdłuż linii to:

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

Problem polega na tym, że template-string-loader wysyła wyeksportowany za pomocą funkcji szablon ciąg Składnia ES6. Nadal będziesz musiał przejść przez babel.

Twoja konfiguracja powinna wyglądać mniej więcej tak:

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

Aby z niej skorzystać trzeba zadzwonić to jako funkcję:

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

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

Answer 3

Rozważ użycie Raw Loader.

Konfiguracja WebPack będzie zawierać to:

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

W swojej napisać kod

import tpl from './mytemplate.html'; 

Answer 4

Spróbuj

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

Więcej informacji na temat tej składni config można przeczytać w html-loader repo readme

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

Answer 5

użyłbym raw-loader zamiast text-loader, ponieważ ma znacznie więcej uczestników i to oficjalnie wymienione w dokumentacji WebPACK: https://webpack.js.org/loaders/raw-loader/

Jest bezpieczniejszy wybór na dłuższą metę.Link do pobrania: https://www.npmjs.com/package/raw-loader

webpack.config.js

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

Teraz mogę go używać, aby załadować plik szablonu jako ciąg dla moich komponentów, takich jak:

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

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