Organisation für Quellcode und Demos

Question

Ich arbeite an einer JavaScript-Bibliothek (repository here) und es enthält sowohl den Quellcode im Verzeichnis lib/ und einige Demos/Beispiele im Verzeichnis demos/. Sowohl einige der Demos als auch der gesamte Quellcode der Bibliothek müssen über Webpack gehen, da sie durch Babel gehen müssen (weil ich ECMAScript 6 verwende).

Allerdings bin ich mir nicht sicher, ob ich nur die webpack-Konfigurationsdatei für die Demos und den Quellcode haben sollte, weil ich auf diese Weise meine Bibliothek nicht zu einer einzigen JavaScript-Datei machen kann. Da die Bibliothek selbst aus mehreren Dateien besteht, verfügt sie über verschiedene Einstiegspunkte (Sprite, SpriteList und Game). Diese werden dann auf einzelne Ausgabedateien gesetzt und ich möchte, dass sie zusammengeführt werden. Ich weiß, dass ich sowohl Webpack als auch Gulp verwenden kann, um das zu erreichen, aber ich bin mir nicht sicher, ob dies der richtige Weg ist.

Kurz gesagt, was ich suche, ist die beste Option zum Organisieren meiner Build-Konfiguration (eine Webpack-Datei vs. zwei Webpack-Dateien, die zweite im Verzeichnis demos/) und auch Webpack vs Webpack + Schluck.

Im Idealfall würde ich einfach meine Konfigurationsdatei optimieren und in der Lage sein, eine einzige Datei für meine Bibliotheksausgabe mit nur Webpack zu generieren, aber ich denke nicht, dass das möglich ist.

Die Konfigurationsdatei ist wie folgt:

import path from 'path'; 

export default { 
    entry: { 
    Sprite: "./lib/Sprite.js", 
    SpriteList: "./lib/SpriteList.js", 
    Game: "./lib/Game.js", 

    HelicopterDemo: "./demos/helicopter_game/PlayState.js", 
    CircleExample: "./demos/circle_example/PlayState.js" 
    }, 

    output: { 
    path: __dirname, 
    filename: "./build/[name].js", 
    library: ["Pentagine", "[name]"], 
    libraryTarget: "umd" 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    }, 

    resolve: { 
    root: [ 
     path.resolve('./lib/') 
    ] 
    }, 

    externals: { 
    "underscore": "underscore" 
    } 
}; 

Answer 1

Sie können Ihre wichtigsten Einstiegspunkte in einer mit einer JS-Datei kombinieren, einfach alle von ihnen die Auflistung, z.B. main.js:

require('./lib/Sprite.js'); 
require('./lib/SpriteList.js); 
require('./lib/Game.js'); 

So können Sie es als Haupteinstiegspunkt in webpack config:

entry: { 
    Main: "./main.js", 
    HelicopterDemo: "./demos/helicopter_game/PlayState.js", 
    CircleExample: "./demos/circle_example/PlayState.js" 
}