源代码和演示的组织

时间:2016-06-23 12:27:58

标签: javascript ecmascript-6 webpack build-process

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

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

简而言之,我正在寻找的是组织构建配置的最佳选择(一个webpack文件与两个webpack文件,第二个在demos/目录中)以及webpack vs webpack +吞。

理想情况下,我只需调整配置文件,并且只能使用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 个答案:

答案 0 :(得分:1)

您可以使用一个JS文件将主要入口点合并为一个,只需列出所有这些入口点,例如: main.js:

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

因此,您可以将其用作webpack config中的主要入口点:

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