Question

是否有允许我将JavaScript文件包含/连接在一起的Gulp插件？

我试图找到一种方式，我可以＆＃34;包括＆＃34;一个JavaScript文件的内容输入到其他人。通过包含，我的意思是这样的：

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

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

＆＃34;编译＆＃34;这样的事情：

// 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这样的东西，但是没有一种简单的方法可以控制他们的订单。我每次添加新文件时都必须修改gulp文件，并手动将它们全部列出（或者有很多复杂的模式），这是一个相当大的痛苦。

我更喜欢可以使用import或include来精确控制文件的位置，并从脚本本身而不是构建工具控制它。非常类似于LESS或其它方式。

对于LESS，我所做的是用＆＃34; .import.less＆＃34;命名后缀文件。如果我不想让他们生成他们自己的独立文件，然后@import他们想要他们在其他文件中。这使得只生成我想要的文件变得非常容易，而不是简单地创建一个巨大的文件。

Answer 1

我最终采用了Mike的想法，并使用除了Babel之外的WebPack来创建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将它们放在一个文件中。

用于执行JavaScript的Gulp插件＆＃34;包括＆＃34;

1 个答案: