源代码和演示的组织答案

【问题标题】：Organization for source code and demos源代码和演示的组织
【发布时间】：2016-06-23 12:27:57
【问题描述】：

我正在开发一个 JavaScript 库 (repository here)，它包括目录 lib/ 中的源代码和目录 demos/ 中的一些演示/示例。一些演示以及库的整个源代码必须通过 Webpack，因为它们必须通过 Babel（因为我使用的是 ECMAScript 6）。

但是，我不确定我是否应该只为演示和源代码提供 webpack 配置文件，因为这样我认为我不能让我的库输出成为单个 JavaScript 文件。因为库本身由多个文件组成，所以它有各种入口点（Sprite、SpriteList 和 Game）。然后将它们放在单个输出文件中，我希望将它们合并。我知道我可以同时使用 Webpack 和 Gulp 来实现这一点，但我不确定这是否是正确的方法。

简而言之，我正在寻找的是组织构建配置的最佳选择（一个 webpack 文件与两个 webpack 文件，第二个位于 demos/ 目录中）以及 webpack 与 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"
  }
};

【问题讨论】：

你为什么不使用 1 个暴露其他类的入口点（想想index.js）。这将允许您的用户使用 import { Sprite, Game } from 'your-library' 之类的库

标签： javascript ecmascript-6 webpack build-process

【解决方案1】：

您可以使用一个 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"
}

【讨论】：