Gulp 插件来做一个 JavaScript "include"

有没有一个 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到我希望它们在其他文件中的位置。这使得只生成我想要的文件变得非常容易，而无需简单地创建一个大文件。

我最终采纳了 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 将它们放在一个文件中。

相关内容

最新更新

热门标签：