web-dev-qa-db-fra.com

Importation de fichiers HTML avec le chargeur de chaînes de modèles es6

Je veux importer mes modèles dans mon js avec es6 template string loader . La seule différence dans mon cas est que je ne veux pas inclure css, seulement html. Mon code est le suivant:

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

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

et mon erreur est Uncaught SyntaxError: Unexpected token export. 

javascriptwebpack
15
Tomek Buszewski

J'ai récemment eu besoin de faire la même chose, et c'est comme ça que je l'ai fait.

1. J'ai utilisé le module npm html-loader , au lieu de es6-template-string-loader

2. Ajouter à webpack.config.js

Webpack 3

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

Webpack 1 (obsolète, mais à partir de la réponse originale):

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

3. Utiliser dans vos fichiers JS

import template from './header.html';
28
KevBot

Pensez à utiliser Raw Loader .

Votre configuration webpack contiendra ceci:

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

Dans votre code, écrivez

import tpl from './mytemplate.html';
2
Artemy

Je suppose que votre webpack.config.js va dans le sens de ceci:

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

Le problème est que template-string-loader génère une fonction de chaîne de modèle exportée à l'aide de la syntaxe ES6. Tu auras encore besoin de passer ça par Babel.

Votre configuration devrait ressembler à ceci:

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

Pour l'utiliser, vous devez appeler en fonction:

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

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

J'utiliserais raw-loader au lieu de text-loader, car il a beaucoup plus de contributeurs et qu'il est officiellement mentionné dans la documentation de webpack: https://webpack.js.org/loaders/raw-loader/

C'est un choix plus sûr à long terme. Lien de téléchargement: https://www.npmjs.com/package/raw-loader

webpack.config.js 

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

Maintenant, je peux l'utiliser pour charger un fichier de modèle en tant que chaîne pour mes composants, comme:

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

Vue.component('my-component',{
   'template' : MyTemplate
})
1
András Endre

Essayer

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

Plus d’informations sur cette syntaxe de configuration peuvent être lues dans html-loader repo readme

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

1
JabbyPanda