Javascript 如何将所有纱线文件与gulp组合

在发现了如何安装版本4而不是抛出弃用错误的默认版本之后，我已经开始构建并运行Thread，了解了它的工作原理，并开始着手解决gulp

现在我已经用Thread安装了3个软件包，它下载了很多依赖项。没问题，可以使用一个gulp文件将它们组合成一个javascript（或者我被告知）

唯一的问题是，我如何做到这一点，同时保持纱线的依赖性，因为纱线建立了这些依赖性？我将如何安排我的吞咽任务来组合我添加的纱线库

我的吞咽任务当前看起来如下所示：

//Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('assets/javascript/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('assets/dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/dist/js'));
});

这连接了我的脚本，但当我想添加Thread文件夹时，我突然想到Thread管理依赖项，而不是所有东西都有正确的依赖项等等。我怀疑我能否将它们全部添加到同一个文件中，并希望一切顺利。（或者我能吗？）

我使用纱线

runwatch

我添加了以下软件包：html5shiv、jquery、Modernizer

---

在资产/节点模块中添加纱线文件的正确方法是什么？

经过长时间搜索后，我发现

这给了我以下解决方案：

执行以下命令：

sudo yarn add global gulp webpack webpack-stream babel-core babel-loader babel-preset-latest

创建

webpack.config.js

文件

输入：

module.exports = {
  output: {
    filename: 'bundle.js', // or whatever you want the filename to be
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: [
            ['latest', { modules: false }],
          ],
        },
      },
    ],
  },
};

然后创建一个

gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');

gulp.task('watch', watchTask);
gulp.task('default', defaultTask);

gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(gulp.dest('./assets/js')); // Or whereever you want your js file to end up.
});

function watchTask(done) {
    // Wherever you stored your javascript files
    gulp.watch('assets/javascript/*.js', gulp.parallel('scripts'))   
    done();
}
function defaultTask(done) {
  // place code for your default task here
  done();
}

然后在目录中执行

warn watch

，并让它在后台运行，您可以随时查看它

您可以使用Thread、gulp和一些gulp插件来实现这一点，但您可能应该研究类似rollup.js、webpack或早午餐之类的东西。