Gulp合并和请求路径

Question

我有一个gulp-concat的问题。我正在尝试将所有js文件合并为一个文件，比如说，dist/app.js。

但是有一些我不理解的地方。在这个文件中，我的所需文件路径仍然与之前相同...

这是我的gulpfile.js：

var gulp       = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel      = require("gulp-babel");
var concat     = require("gulp-concat");
var resolveDependencies      = require("gulp-resolve-dependencies");

gulp.task("default", function () {
  return gulp.src("client/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("app.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/js"));
});

你可以看到，我希望合并嵌套文件夹。

例如，在我的 /client/components/app.js 文件的顶部，请看以下示例：

import React, {PropTypes} from 'react';
import AppLeftNav from './AppLeftNav';
import {AppCanvas, AppBar, Styles} from 'material-ui';

//Code here

所以在我的应用程序 app.js 中，由 gulp 生成，我可以看到：

var _AppLeftNav = require('./AppLeftNav');

这是一个相对路径，不能正常工作。

那么，如何处理这些需要使用相对路径的文件呢？

非常感谢。

编辑：看到我得到的错误：

Error: Cannot find module './components/App.js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (MyFolder\dist\js\app.js:34:24)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

- Poirette

Answer 1

对于可能遇到同样问题的人。Babel目前不支持内联导入#1681，gulp-concat也不支持，因为它只是将文件连接在一起。

我选择使用Rollup来正确解析依赖关系，然后再转换输出：

var gulp = require('gulp');
var gutil = require('gulp-util');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var rollup = require('gulp-rollup');

gulp.task('build', function () {
  return gulp.src('src/parser-factory.js', { read: false })
    .pipe(rollup({ external: ['request', 'cheerio'] }))
    .on('error', gutil.log)
    .pipe(babel({ stage: 0 }))
    .pipe(concat('realty-parser.js'))
    .pipe(gulp.dest('lib'));
});

- ExD

---

感谢您的回复。我的问题在于我对gulp和Browserify的误解。我已经通过一个入口点（我的app.js）使用browserify完成了我想要的拼接和转译。抱歉。 - Poirette

Answer 2

如果你想把所有内容放在一个文件中，那么你需要写 .pipe(gulp.dest("dist/js/jsfile.js"));，其中jsfile是你的文件名。

- Mahabub Islam Prio

---

我已经将所有文件都放在一个文件夹中了。但是，require和path是否被解析或其他处理了呢？我不确定我表达清楚了 :/ - Poirette