第一期

Question

我正在尝试在NodeJS和网络浏览器中开发一个同构游戏。我决定将我的代码库转移到ES6和ES7并使用BabelJS进行编译。

我在使用Gulp，Babelify和Gulp-develop-server编译代码时遇到了困难。

第一期

首先，当我使用Gulp watch并调用

时，服务器似乎会缓存文件

申请结构
node_modules中的文件存在，因为那时我不需要相对导入路径。从'event / event'导入事件;而不是从'../ 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" } ] ] } })
|    | -- ...

第二期

当我导入我的单例时，它缺少其功能。以前，我尝试创建一个类，并导出它的实例，但这不起作用。

的Singleton

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 );
    }
};

Class （.listen（）不起作用）

import Event from 'event/event';

export default class Game
{
    constructor()
    {
        // listen is undefined
        Event.listen( 'play', function () {} );
    }
}

Gulp Cache

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();
} );

Answer 1

我现在正在使用RollupJS（http://rollupjs.org），因为它极大地简化了模块加载和运行像Babel这样的插件的过程。

停止投票并认为这篇文章过于宽泛。如果你真的试着去做我已经做过的事情，你就会意识到这是一个非常具体的问题。

如何使用Gulp和Babelify（Babel + Browserify）编译单例和类

第一期

第二期

1 个答案: