源代碼和演示組織

我正在研究JavaScript庫（repository here），它包含目錄lib/中的源代碼和目錄demos/中的一些演示/示例。圖書館的一些演示以及整個源代碼必須通過Webpack去，因爲它們必須通過Babel（因爲我使用的是ECMAScript 6）。源代碼和演示組織

不過，我不知道我是否應該有一個演示和源代碼，因爲這樣一來，我不認爲我可以讓我的圖書館輸出是一個單一的JavaScript文件都只有的WebPack配置文件。由於庫本身由多個文件組成，因此它具有各種入口點（Sprite，SpriteList和Game）。這些然後得到放在單個輸出文件，我想他們被合併。我知道我可以使用Webpack和Gulp來實現這一目標，但我不確定這是否正確。

總之，我期待的是組織我的構建配置（一個webpack文件vs兩個webpack文件，第二個在demos/目錄內）以及webpack vs webpack + gulp的最佳選擇。

理想的情況下，雖然，我會簡單地調整我的配置文件，並能夠生成僅使用的WebPack我的圖書館輸出一個單獨的文件，但我不認爲這是可能的。

配置文件如下：

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" 
    } 
};

來源

2016-06-23 David Gomes

你爲什麼不使用1個入口點暴露其他類（認爲'index.js'）。這將允許你的用戶使用庫，比如'your-library''中的import {Sprite，Game} – deadlock

您可以在一個使用一個JS文件，簡單地列出所有的人，例如結合您的主入口點main.js：

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

所以，你可以用它作爲配置的WebPack主要切入點：

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

來源

2016-06-23 12:59:23 udalmik

源代碼和演示組織

回答

相關問題