-2
我想在NodeJS和Web瀏覽器中開發一個同構的遊戲。我決定將我的代碼庫轉移到ES6和ES7，並使用BabelJS進行編譯。如何使用Gulp和Babelify（Babel + Browserify）編譯單例和類
我很難用Gulp，Babelify和Gulp-develop-server編譯代碼。
首次發行
首先，服務器似乎當我使用咕嘟咕嘟看，並呼籲
應用程序結構
中node_modules文件都存在，因爲那時我並不需要相對於緩存文件導入路徑。從「事件/事件」導入事件;而不是來自'../event'的導入事件;
src
|
| -- client
| |
| | -- main.js (Entrypoint, instantiate game.js class)
| | -- ...
|
| -- server
| |
| | -- main.js (Entrypoint, instantiate game.js class)
| | -- ...
|
| -- node_modules
| |
| | -- event
| | |
| | | -- event.js (See singleton below)
| | | -- package.json ({ "browserify": { "transform": [ [ "babelify", { "stage": "0" } ] ] } })
| | -- game
| | |
| | | -- game.js (Class, imports event.js)
| | | -- package.json ({ "browserify": { "transform": [ [ "babelify", { "stage": "0" } ] ] } })
| | -- ...
第二期
當我輸入我的單身，它缺少的功能。以前，我嘗試創建一個類，然後導出它的一個實例，但那不起作用。
辛格爾頓
export default
{
events: new Map(),
dispatch: function (name, value)
{
if (!this.events.has(name))
{
this.events.set(name, []);
}
for (var func of this.events.get(name))
{
func(value);
}
},
listen: function (name, func)
{
if (!this.evens.has(name))
{
this.events.set(name, [ func ]);
}
this.events.get(name).push(func);
}
};
類（。聽（）不工作）
import Event from 'event/event';
export default class Game
{
constructor()
{
// listen is undefined
Event.listen('play', function() {});
}
}
咕嘟咕嘟緩存
var gulp = require('gulp'),
babel = require('gulp-babel'),
babelify = require('babelify'),
server = require('gulp-develop-server'),
source = require('vinyl-source-stream'),
changed = require('gulp-changed'),
sourcemaps = require('gulp-sourcemaps'),
browserify = require('browserify'),
autoprefixer = require('gulp-autoprefixer'),
watchify = require('watchify');
var paths = {
client: 'src/client/',
common: 'src/node_modules/',
server: 'src/server/',
html: 'src/client/view/',
css: 'src/client/view/css/',
assets: 'src/client/view/assets/',
node_modules: 'node_modules',
build_client: 'build/client',
build_server: 'build'
};
var files = {
client: paths.build_client + '/client.js',
server: paths.build_server + '/server_src.js'
}
gulp.task('watch', [ 'build', 'server:start' ], function()
{
var originalKeys = Object.keys(require.cache);
gulp.watch([ paths.common + '**/*.js', paths.client + '**/*.js' ], [ 'client:js' ]);
gulp.watch([ paths.common + '**/*.js', paths.server + '**/*.js' ], [ 'server:restart' ]);
});
gulp.task('watch_client:js', function()
{
var bundle = browserify(
{
debug: true,
entries: './src/client/main.js',
cache:
{},
packageCache:
{}
});
bundle = watchify(bundle);
bundle.transform(babelify.configure(
{
sourceMaps: true,
stage: 0
}));
bundle.on('update', function()
{
executeBundle(bundle);
});
executeBundle(bundle);
});
function executeBundle(bundle)
{
var start = Date.now();
bundle
.bundle()
.on("error", function (err)
{
console.log("Error : " + err.message);
})
.pipe(source('client.js'))
.pipe(gulp.dest(paths.build_client))
.on('time', function (time)
{
console.log('Bundle finished in ' + time + '.');
});
}
gulp.task('build', [ 'client:js', 'client:node_modules', 'server:js' ]);
gulp.task('client:js', function()
{
browserify(
{
debug: true,
cache:
{},
packageCache:
{}
})
.transform(babelify.configure(
{
sourceMaps: true,
stage: 0
}))
.require("./src/client/main.js",
{
entry: true
})
.bundle()
.pipe(source('client.js'))
.pipe(gulp.dest(paths.build_client));
});
gulp.task('client:node_modules', function()
{
return gulp.src([ paths.node_modules + '/socket.io/node_modules/socket.io-client/socket.io.js' ])
.pipe(changed(paths.build_client))
.pipe(gulp.dest(paths.build_client));
});
gulp.task('server:js', function()
{
browserify(
{
debug: true
})
.transform(babelify.configure(
{
sourceMaps: true,
stage: 0
}))
.require("./src/server/main.js",
{
entry: true
})
.bundle()
.pipe(source('server_src.js'))
.pipe(gulp.dest('./build'));
gulp.src('./src/server/server.js')
.pipe(gulp.dest(paths.build_server));
});
gulp.task('server:start', [ 'server:js' ], function()
{
server.kill();
server.listen(
{
path: paths.build_server + '/server.js'
});
});
gulp.task('server:restart', [ 'server:js' ], function()
{
server.restart();
});