Question

大家好日子。

几天来，我一直在努力设置反应。到目前为止，我有以下内容。

文件夹结构＆gt;

gulpfile.js
content
|--js
|--src
   |--libraries
   |  |--jquery (and others)
   |--react
      |--containers
      |  |--my-base-file.jsx
      |--components
         |--my-first-component.jsx
         |--my-second-component.jsx

现在，我的反应片看起来像这样：

我的碱基file.jsx

var FirstComponent = require('FirstComponent');
ReactDOM.render(<FirstComponent />, document.getElementById('content'))

我的先component.jsx

var SecondComponent = require('SecondComponent');

class FirstComponent extends React.Component {
    render() {
        return (
            <div>
                <p>Some Content</p>
                <SecondComponent />
            </div>
        )
    }
}

module.exports = FirstComponent;

MY-第二component.jsx

class SecondComponent extends React.Component {
    render() {
        return (
            <div>
                **MAGIC**
            </div>
        )
    }
}

module.exports = SecondComponent;

现在我的gulpfile.js看起来像这样：

var gulp = require('gulp');

var concat = require('gulp-concat');
var react = require('gulp-react');

var babel = require('gulp-babel');

var folders = {
    jsOut: "./content/js/",
    common: [
        "./content/src/libraries/jquery/jquery-3.3.1.js",
        "**MORE-FILES**",
    ],
    example: [
        "./content/src/react/containers/my-base-file.jsx"
    ],
};

gulp.task('test', function () {
    return gulp.src(folders.common.concat(folders.example))
        .pipe(babel({
            plugins: ['transform-react-jsx']
        }))
        .pipe(concat('example.js'))
        .pipe(gulp.dest(folders.jsOut));
});

我知道不一定很漂亮，但过去48小时我一直在改变这一点：P

现在，最后，似乎正确地组合了文件。我得到一个例子.js＆＃39;包含来自common和base文件的文件。现在的问题是，我无法使用require来拉动它们。

如果我不使用require，我可以编译所有内容并将其正确组合。但我希望能够分辨每个文件的依赖关系，同时仍能使用jsx文件。

我尝试直接使用反应，只需删除＆＃34; .pipe（babel（.....）＆＃34;使用＆＃34; .pipe（react（））＆＃34;然后只指定所有文件一次。

显然，我做错了什么，但我看到的所有教程都有不同的方法，我觉得通过实施其中一个教程我删除了从其他人那里学到的东西。

任何帮助将不胜感激。我对这种开发JS的方式有点新，特别是用gulp进行设置。

谢谢。

使用gulp和babel设置反应？

0 个答案: