源代码和演示组织

我正在研究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

源代码和演示组织

回答

相关问题