web-dev-qa-db-fra.com

Utilisez webpack pour regrouper plusieurs classes ES6 en un seul fichier à importer dans une balise de script

Cela fait maintenant trois jours que j'essaie de comprendre le webpack pour effectuer une tâche simple (celle bien sûr, en trois jours j'aurais pu le faire à la main) mais dans le but d'apprendre le webpack et de pouvoir évoluer. ..

Je viens avec vous avec une question désespérée, qui est probablement liée à ce que cette personne essayait de réaliser Comment puis-je concaténer et réduire les fichiers à l'aide de webpack mais sa solution n'a pas fonctionné pour moi.

Le problème est assez simple j'ai trois classes:

./ src/class1.js 

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

./ src/class2.js 

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

./ src/class3.js 

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

Ce que je voudrais faire, c'est dans une page index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test ton cul</title>
    <script src="./lib/ebjs.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript">
      console.log(One, Two, Three);
    </script>
  </body>
</html>

Je serais également satisfait de

new window.One() 
//.. or EVEN 
new window.ebjs.One()

J'ai donc essayé plusieurs config, je vais vous épargner les détails atroces et les frustrations que j'ai traversés ... Manque de sommeil et de nourriture.

J'ai longtemps essayé de faire fonctionner le point d'entrée du tableau ... mais j'ai lu quelque part dans la doc "Si vous passez un tableau: Tous les modules sont chargés au démarrage. Le dernier est exporté." Et cela expliquait beaucoup ... Je n'ai toujours eu qu'une seule classe ... quoi que cela signifie ... pourquoi cela se comporterait-il comme ça? Cela n'a absolument aucun sens pour moi ... de toute façon ... Mais même alors, la classe que j'ai reçue n'était pas de la forme library.class () ou window.class () ou class ().

Donc après un certain temps, je pense, permet de tout charger dans un index.js et de l'exporter!

J'ai d'abord essayé l'importation ES6 pour le style, car pourquoi pas. Mais import {One} from './src/class1' ne fonctionne pas d'une manière ou d'une autre, il suffit de produire un groupe lors de l'exportation non définie. Comme window.library.One = undefined.

J'ai donc encore joué un peu avant de me contenter de cet index.js:

index.js 

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

Ma configuration webpack a beaucoup changé, mais voici ce que j'utilise maintenant:

webpackrc.config.babel.js 

const libraryName = 'ebjs'
const outputFile = `${libraryName}.js` 

export default {
  entry: './index.js',
  target: 'web',
  // entry: './index.js',
  devtool: 'source-map',
  output: {
    path: `${__dirname}/lib`,
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
      },
    ],
  },
}

Beaucoup de détails et essais/erreurs ont été péniblement entrepris .. et j'ai écrit un journal de mes expérimentations .. peut-être que je le partagerai avec le monde avant d'appuyer sur la gâchette dans quelques heures.

Quoi qu'il en soit, cela fonctionne en quelque sorte, mais pas comme prévu et certainement pas à la qualité de la production. Pour accéder à la classe, je dois utiliser "new libraryName.One.One ()". Si je voulais regrouper cela pour npm, cela n'aurait aucun sens pour les utilisateurs. Cela ne fonctionne toujours pas comme prévu.

Voici une capture d'écran de l'objet sur la page: First world problems

J'espère que quelqu'un viendra à mon aide. Ma vie pourrait vraiment en dépendre :)

Merci !

MODIFIER ET FIN

La réponse cbll a donc fonctionné ... J'ai pu utiliser l'instruction d'importation es6 et les classes ont été correctement exportées dans le bundle. Dans le html je pourrais utiliser

libraryName.class()

J'ai créé un petit dépôt si quelqu'un se trouve dans la même situation que moi:

https://github.com/albertbuchard/example-webpack-es6-class-bundle

Merci encore cbll et Michael Jungo!

javascriptnode.jsnpmwebpackwebpack-2
13
Albert James Teddy

Dans chaque classN.js, exportez chaque classe par export default One soit à la fin du fichier, soit au début (comme vous le faites dans votre exemple "One", mais pas dans les autres). Dans votre index.js, importez chacun par: import One from './classN.js', bien sûr en supposant qu'ils se trouvent dans le même dossier (sinon, ajoutez le chemin correct). Il sera ensuite inclus dans votre index.js principal et fourni avec Webpack.

Dans votre cas, cela signifie que votre index.js commencerait quelque chose comme ceci:

import One from ('./src/class1.js')
import Two from ('./src/class2.js')
import Three from ('./src/class3.js')

Cela suppose que vous exportiez toutes vos classes comme One dans votre exemple, donc:

export default class One { // code goes here

export default class Two { // code goes here

export default class Three { // code goes here

8
cbll

Vous y êtes à peu près, mais il semble que vous soyez un peu confus par la syntaxe import/export.

Tout d'abord, vous exportez les classes différemment. Dans ./src/class1.js vous utilisez l'exportation par défaut: export default class One { mais dans les deux autres, vous utilisez des exportations nommées export { Two }. Pour les importer correctement, vous auriez:

import One from './src/class1'
import { Two } from './src/class2'
import { Three } from './src/class3'

Parce que require fonctionne différemment des modules ES, l'équivalent avec require est:

const One = require('./src/class1').default;
const Two = require('./src/class2').Two;
const Three = require('./src/class3').Three;

Ensuite, vous pouvez simplement les exporter avec:

export { One, Two, Three }

Et dans votre index.html vous devez ajouter le préfixe de la bibliothèque:

<script type="text/javascript">
  console.log(ebjs.One, ebjs.Two, ebjs.Three);
</script>
3
Michael Jungo