如何使用具有多个入口点的 Webpack 和 Gulp 来转换应用程序和测试目录？

Posted 2023-03-08

【中文标题】如何使用具有多个入口点的 Webpack 和 Gulp 来转换应用程序和测试目录？

【英文标题】：How to use Webpack and Gulp with multiple entry points to transpile app and test directories?

【发布时间】：2016-07-06 11:18:57

【问题描述】：

我正在构建一个基本的博客项目来练习使用 React、ES6 和 Mocha 测试框架。我在 default Gulp 任务中编译 ES6 测试和应用程序代码时遇到问题。

我在运行default 任务并更改./test/posts.js 的内容以使watch 生效时收到此错误：

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

最终，我希望在./build/blog.bundle.js 和./build/posts.bundle.js 上分别找到./app/js/blog.js 和./test/posts.js 的转译代码。

【参考方案1】：

我的 webpack.config.js 和 gulpfile.js 存在一些问题。显然，webpack.config.js 中的output 对象中的path 属性与gulp.dest('./build') 冲突。我还重新格式化了配置文件中的一些内容以镜像一个工作。下面是应该工作的代码。希望这可以帮助其他人尝试完成同样的事情。

我已经 gulp 启动 webpack 为应用程序和测试入口点生成单独的包文件。我还获得了创建的每个捆绑包的源图。现在我可以在 ES6 中编写测试和应用程序代码，并在 WebStorm 中使用 Mocha 运行它们！

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 

【讨论】：

vinyl-named 在这做什么？

感谢您发布此内容，我遇到了同样的问题。