如何使用 Babel 和 Webpack 设置 Gulp答案

【问题标题】：How to setup Gulp with Babel and Webpack如何使用 Babel 和 Webpack 设置 Gulp
【发布时间】：2023-04-09 18:23:01
【问题描述】：

我正在创建一个 nodejs 应用程序，因为它不支持模块加载（导入）功能，但我想利用 babel/webpack 来做到这一点。

谁能帮我设置一下，让它运行我的服务器，编译所有内容，通过运行“gulp”检查更改

吞咽：

var gulp       = require('gulp');
var nodemon    = require('gulp-nodemon');
var notify     = require('gulp-notify');
var livereload = require('gulp-livereload');
var webpack    = require('webpack-stream');

gulp.task('es6', () => {

    return gulp.src('index.js')
               .pipe(webpack(require('./webpack.config.js')));
});

gulp.task('listen', () => {

    livereload.listen();

    nodemon({
        script: 'index.js',
        ext: 'js'
    }).on('restart', () => {
        gulp.src('index.js')
            .pipe(livereload())
            .pipe(notify('Reloading page, please wait...'));
    });

});

gulp.task('default', ['es6', 'listen'], () => {
});

网页包：

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel', // 'babel-loader' is also a legal name to reference
            query: {
                presets: ['es2015']
            }
        }
    ]
}

【问题讨论】：

你可以使用webpack-dev-server来代替livereload，这样会更快。

标签： node.js gulp webpack babeljs

【解决方案1】：

查看这个存储库，我为您创建了一个示例。

https://github.com/synthecypher/babel-gulp-webpack

const gulp             = require('gulp');
const gutil            = require('gulp-util');
const webpack          = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

// webpack-dev-server will build files and serve them from memory (no files written to disk).
gulp.task('default', (callback) => {
  let config = require('./webpack.config');
  config.entry.app.unshift(`webpack-dev-server/client?http://${config.devServer.host}:${config.devServer.port}/`);
  new WebpackDevServer(new webpack(config), config.devServer)
    .listen(config.devServer.port, config.devServer.host, (err) => {
      if (err) throw new gutil.PluginError('webpack-dev-server', err);
      gutil.log(gutil.colors.cyan(`http://${config.devServer.host}:${config.devServer.port}`));
    });
});

// output will be built to the `dist` folder.
gulp.task('build', (callback) => {
  let config = require('./webpack.config.js');
  webpack(config, (err, stats) => {
    if (err) throw new gutil.PluginError("webpack", err);
    stats.toString(config.devServer.stats).split('\n').map((line) => {
      gutil.log(gutil.colors.blue("[webpack]"), line);
    });
    callback();
  });
});

【讨论】：