Come utilizzare Webpack e Gulp con più punti di ingresso per traspolare app e directory di test?

Question

Sto costruendo un progetto di blog di base per esercitarsi nell'utilizzo del framework di test React, ES6 e Mocha. Ho problemi nel transcodificare i miei test ES6 e il codice app all'interno del mio compito Gulp default.

ottengo questo errore quando ho eseguito il compito default e modificare i contenuti del ./test/posts.js per la watch abbia effetto:

[11:17:29] Using gulpfile ~/WebstormProjects/blog/gulpfile.js 
[11:17:29] Starting 'default'... 
[11:17:29] Finished 'default' after 8.54 ms 

stream.js:75 
     throw er; // Unhandled stream error in pipe. 
    ^
Error: invalid argument 
    at pathToArray (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:44:10) 
    at MemoryFileSystem.mkdirpSync (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:139:13) 
    at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34) 
    at Compiler.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:229:25) 
    at Compiler.applyPluginsAsync (/Users/christian/WebstormProjects/blog/node_modules/tapable/lib/Tapable.js:60:69) 
    at Compiler.emitAssets (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:226:7) 
    at Watching.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:54:18) 
    at /Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:403:12 
    at Compiler.next (/Users/christian/WebstormProjects/blog/node_modules/tapable/lib/Tapable.js:67:11) 
    at Compiler.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/CachePlugin.js:40:4) 

Process finished with exit code 1 

webpack.config.js

var path = require('path'); 
var babel = require('babel-loader'); 

module.exports = { 
    entry: { 
    app: './app/js/blog.js', 
    test: './test/posts.js' 
    }, 
    output: { 
    filename: '[name].bundle.js', 
    path: './build', 
    sourceMapFilename: '[name].bundle.map' 
    }, 
    watch: true, 
    devtool: '#sourcemap', 
    module: { 
    loaders: [ 
     { 
     loader: 'babel', 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ], 
    resolve: { 
     root: path.resolve('./app'), 
     extensions: ['', '.js'] 
    } 
    } 
}; 

gulpfile.js

var gulp = require('gulp'); 
var webpack = require('webpack-stream'); 
var watch = require('gulp-watch'); 
var babel = require('babel-loader'); 
var named = require('vinyl-named'); 


gulp.task('default', function() { 
    watch(['./app/**/*.js', './test/*.js'], function() { 
    return gulp.src(['./app/js/blog.js', './test/posts.js']) 
     .pipe(named()) 
     .pipe(webpack(require('./webpack.config.js'))) 
     .pipe(gulp.dest('./build')); 
    }); 
}); 

gulp.task('testBundle', function() { 
    gulp.src('./test/posts.js') 
    .pipe(webpack(require('./webpack.config.js'))) 
    .pipe(gulp.dest('./build')); 
}); 

posts.js

import expect from 'expect' 
import { post, posts, addPost } from '../app/js/blog' 
import { createStore } from 'redux' 

describe('Blog',() => { 

    describe('posts',() => { 

    it('should be able to create a post',() => { 
     let store = createStore(posts); 
     store.dispatch(addPost('First Post', 'Blah blah blah')) 
     let blah = { id: 'First Post', content: 'Blah blah blah'} 
     expect(store.getState()).toEqual(blah) 
    }); 

    it('should be able to create multiple posts',() => { 
     let store2 = createStore(posts); 
     store2.dispatch(addPost('Second Post', 'Shh')) 
     let expectedState1 = { id: 'Second Post', content: 'Shh' } 
     expect(store2.getState()).toEqual(expectedState1) 

     store2.dispatch(addPost('Third Post', 'Whatever')) 
     let expectedState2 = { id: 'Third Post', content: 'Whatever'} 
     expect(store2.getState()).toEqual(expectedState2) 
    }) 
    }); 
}); 

In definitiva, mi piacerebbe il codice transpiled per essere trovato alla ./build/blog.bundle.js e ./build/posts.bundle.js rispettivamente ./app/js/blog.js e ./test/posts.js,.

Answer 1

Ci sono stati alcuni problemi con il mio webpack.config.js e gulpfile.js. Apparentemente, la proprietà path all'interno dell'oggetto output in webpack.config.js era in conflitto con gulp.dest('./build'). Ho anche riformattato alcune cose nel file di configurazione per rispecchiare quello funzionante. Di seguito è riportato il codice che dovrebbe funzionare. Speriamo che questo aiuti gli altri a cercare di ottenere la stessa cosa.

Ho gulp che avvia il webpack per produrre file bundle separati per i punti di ingresso di app e test. Ottengo anche sourcemaps per ciascuno dei bundle che vengono creati. Ora posso scrivere test e codice app in ES6 ed eseguirli con Mocha in WebStorm!

gulpfile.js

var gulp = require('gulp'); 
var webpack = require('webpack-stream'); 
var watch = require('gulp-watch'); 
var named = require('vinyl-named'); 


gulp.task('default', function() { 
    watch(['./app/**/*.js', './test/*.js'], function() { 
    return gulp.src(['./app/js/blog.js', './test/posts.js']) 
     .pipe(named()) 
     .pipe(webpack(require('./webpack.config.js'))) 
     .pipe(gulp.dest('./build')); 
    }); 
}); 

gulp.task('webpack', function() { 
    return gulp.src(['./app/js/blog.js', './test/posts.js']) 
    .pipe(named()) 
    .pipe(webpack(require('./webpack.config.js'))) 
    .pipe(gulp.dest('./build')); 
}); 

webpack.config.js

var path = require('path'); 
var babel = require('babel-loader'); 

module.exports = { 
    entry: { 
    app: './app/js/entry.js', 
    test: './test/posts.js' 
    }, 
    output: { 
    filename: '[name].bundle.js', 
    sourceMapFilename: '[name].bundle.map' 
    }, 
    devtool: '#source-map', 
    module: { 
    loaders: [ 
     { 
     loader: 'babel', 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    }, 
    resolve: { 
    root: path.resolve('./app'), 
    extensions: ['', '.js'] 
    } 
}; 

entry.js

import { posts } from './blog' 

import { createStore } from 'redux' 

createStore(posts) 

blog.js

const posts = (state = [], action) => { 
    switch (action.type) { 
    case 'ADD_POST': 
     return post(undefined, action) 
    default: 
     return state 
    } 
} 

const post = (state = {}, action) => { 
    switch (action.type) { 
    case 'ADD_POST': 
     return { id: action.name, content: action.content } 
    } 
} 

// action creator 
const addPost = (name, content) => { 
    return { 
    type: 'ADD_POST', 
    name, 
    content 
    } 
} 

export { posts, post, addPost }