2

是否有一个 Gulp 插件可以让我将 JavaScript 文件包含/连接在一起？

我正在尝试一种方法，可以将一个 JavaScript 文件的内容“包含”到其他文件中。通过包含，我的意思是有这样的东西：

// main.js
var a = 2;
///include an-include-file.import.js

// an-include-file.import.js
var b = 5;

“编译”成这样的东西：

// compiled.js
var a = 2;
var b = 5;

或者，可能更好，像这样：

 // compiled.js v2
 var a = 2;

 // wrapped in an anonymous, self-calling function to isolate scope
 (function () {
     var b = 5;
 })();

我自己编写了一个插件来做到这一点，但我希望能够使用源映射。自己实现源映射比我想投入到这个小项目上要付出更多的努力。

现在，我知道我可以使用类似的东西gulp-concat，但是没有一种简单的方法来控制它们的顺序。每次添加新文件时，我都必须修改 gulpfile，并手动将它们全部列出（或有很多复杂的模式），这是一个相当大的痛苦。

我更喜欢可以使用导入或包含来精确控制文件去向的东西，并从脚本本身而不是构建工具来控制它。非常类似于 LESS 或其他东西的做法。

对于 LESS，如果我不希望它们生成自己的独立文件，我所做的就是用“.import.less”命名后缀文件，然后将@import它们放在我希望它们在其他文件中的位置。这使得只生成我想要的文件变得非常容易，而无需简单地创建一个巨大的文件。

4

1 回答 1

1

我最终采纳了 Mike 的想法并使用 WebPack 和 Babel 来创建 ES6 风格的模块。

基本情况如下所示：

// math.js
export function sum (a, b) { return a + b; }

// main.js
import sum from "math";
console.log(sum(1, 2));

我使用 Gulp 来处理我的构建过程，它以简化的方式看起来像这样：

var gulp = require('gulp'),
    webpack = require('webpack-stream');

gulp.task('build', function () {
    return gulp.src('main.js')
        .pipe(webpack())
        .pipe(gulp.dest('dist'));
});

我的实际用法要复杂得多，但这是基本思想。我必须在我的 webpack 配置中使用 babel-loader（带有 ES2015 预设）让它将 ES6 处理为 ES5，然后 WebPack 将它们放在一个文件中。

相关阅读：

于 2016-02-24T02:02:14.307 回答