Question

我的gulp文件对我来说很重要。

//-----------------------------------------------------------------------------
// gulpfile.js
// Gulp is our task runner. Currently being used to transpile ES6 and React.
//-----------------------------------------------------------------------------
const gulp = require('gulp');
const babel = require('babelify');
const browserify = require('browserify');
const source = require("vinyl-source-stream");
const buffer = require("vinyl-buffer");

//-----------------------------------------------------------------------------
// Transpile the ES6 and React code.
//-----------------------------------------------------------------------------
gulp.task('js', () => {
    return browserify({ entries: ['react-src/LobbyChatReact.js'] })
    .transform(babel, {presets: ["react", "es2015"]})
    .bundle()
    .pipe(source('LobbyChatReact.js'))
    .pipe(gulp.dest('public/javascripts/react-build'));
});

所以这是成功获取/react-src/LobbyChatReact.js中的jsx文件，进行转换，然后在/public/javascripts/react-build/LobbyChatReact.js中输出结果。

我应该注意的一点是，此输出文件类似于20,000行。这是正常的吗？我非常确定browserify是罪魁祸首。

我的jsx文件是标准的。不要以为这是我的问题。

import React from 'react';
import ReactDOM from 'react-dom';

class Lobby extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
            </div>
        )
    };
}

ReactDOM.render(<Lobby />, document.getElementById("test"));

所以这是我的ejs文件，其中包含我试图将此反应组件渲染到的div。

<!DOCTYPE html>
<html>
<head>
<title>Lobby Chat</title>
<script type="text/jsx" src="javascripts/react-build/LobbyChatReact.js"></script>
</head>
<body>
<div id="test">
</div>
</body>
</html>

这是我的良好衡量标准。

//-------------------------------------------------------------------------
// Get lobby chat.
//-------------------------------------------------------------------------
router.get('/lobbychat', function(req, res) {
    res.render('LobbyChatReact');
});

因此，由于我的jsx被成功编译，我不确定为什么我无法渲染它。我没有收到任何错误，只是一个空白的屏幕。

这是一个线索。如果我包含这样的东西

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

在我的ejs文件的头部，然后它将呈现。问题是，它需要3秒才能加载并且几乎冻结了我的笔记本电脑它的速度非常慢。我认为它与20,000行输出文件有关？我在转换时已经使用了babel，那么这个cdn如何在我已编译的文件上工作呢？

成功转换jsx不会渲染

0 个答案: