Javascript 源代码和演示的组织
我正在开发一个JavaScript库(),它包括目录Javascript 源代码和演示的组织,javascript,ecmascript-6,webpack,build-process,Javascript,Ecmascript 6,Webpack,Build Process,我正在开发一个JavaScript库(),它包括目录lib/中的源代码和目录demos/中的一些演示/示例。一些演示以及库的整个源代码都必须经过Webpack,因为它们必须经过Babel(因为我使用的是ECMAScript 6) 然而,我不确定我是否应该只有演示和源代码的webpack配置文件,因为这样我不认为我可以使我的库输出成为单个JavaScript文件。因为库本身由多个文件组成,所以它有不同的入口点(精灵、精灵列表和游戏)。然后将这些文件放在单个输出文件中,我希望将它们合并。我知道我可以
lib/
中的源代码和目录demos/
中的一些演示/示例。一些演示以及库的整个源代码都必须经过Webpack,因为它们必须经过Babel(因为我使用的是ECMAScript 6)
然而,我不确定我是否应该只有演示和源代码的webpack配置文件,因为这样我不认为我可以使我的库输出成为单个JavaScript文件。因为库本身由多个文件组成,所以它有不同的入口点(精灵、精灵列表和游戏)。然后将这些文件放在单个输出文件中,我希望将它们合并。我知道我可以使用Webpack和Gulp来实现这一点,但我不确定这是否是正确的方法
简言之,我要寻找的是组织构建配置的最佳选项(一个网页包文件与两个网页包文件,第二个在demos/
目录中)以及网页包与网页包+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"
}
};
您可以使用一个JS文件将您的主要入口点合并为一个,只需列出所有入口点,例如main.JS:
require('./lib/Sprite.js');
require('./lib/SpriteList.js);
require('./lib/Game.js');
因此,您可以将其用作网页包配置中的主要入口点:
entry: {
Main: "./main.js",
HelicopterDemo: "./demos/helicopter_game/PlayState.js",
CircleExample: "./demos/circle_example/PlayState.js"
}
为什么不使用一个公开其他类的入口点(想想
index.js
)。这将允许您的用户使用库,如从“您的库”导入{Sprite,Game}