Question

抱歉可能是一个noob问题，但是我一直在阅读很多文章试图让它发挥作用，但我还没有成功。

我喜欢在Express中构建我的应用程序，并希望开始将React用于我的一些可重用组件。

我希望能够使用JSX获得更清晰的语法，并且一直试图让Babel使用我的基本Express应用程序。任何帮助将不胜感激！

使用快速CLI后我有一个基本的快速申请：

express example_app --pug

我还安装了以下依赖项：

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-react babel-preset-env react react-dom

然后我将我的预设添加到.babelrc

{
  "presets": ["es2015", "env", "react"]
}

我的package.json看起来像这样：

{
  "name": "sample-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "babel-node app.js --presets es2015,env,react",
    "devstart": "nodemon ./bin/www"
  },
  "dependencies": {
    "async": "^2.6.0",
    "babel-preset-env": "^1.6.1",
    "body-parser": "~1.18.2",
    "compression": "^1.7.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "express-jsx": "0.0.4",
    "express-validator": "^5.0.3",
    "hbs": "~4.0.1",
    "helmet": "^3.12.0",
    "moment": "^2.21.0",
    "mongoose": "^5.0.11",
    "morgan": "~1.9.0",
    "pug": "^2.0.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "serve-favicon": "~2.4.5"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.17.2",
    "rimraf": "^2.6.2"
  }
}

这是我的Express app.js文件：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.listen(3000, function () {
console.log('Example app listening on port 3000!')
});

module.exports = app;

这是我的视图的index.pug布局：

doctype html
html
  head
    title= title
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(type = "module" src='javascripts/script.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    div#root Hello, React is not working

最后，这是我的script.js文件，其中包含我从React教程中获取的React组件＆＃34;将React添加到现有应用程序＆＃34; ：

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

$( document ).ready(function() {

ReactDOM.render(
  <h1>Hello, React is now working</h1>,
  document.getElementById('root')
);

});

但是，每次我通过＆＃34; npm start＆＃34;开始我的应用程序我总是得到一个＆＃34; Uncaught SyntaxError：Unexpected token＆lt;＆＃34;在我的控制台中。我尝试将脚本标记类型更改为＆＃34; text / babel＆＃34;和＆＃34; text / jsx＆＃34;，它不会产生控制台错误。但是，React组件不会渲染到视图上。

任何帮助将不胜感激！谢谢！

Answer 1

看起来您缺少应用程序的React部分的转换器。

当你运行babel-node时，它会转换你后端的代码，所以Node可以理解它。你必须用script.js

做同样的事情

它看起来像是为您的浏览器提供ES6语法javascript，它只能理解vanilla javascript。您可能需要一个捆绑器（如webpack）将您的代码转换为vanilla并将结果提供给浏览器。

在坚果外壳中，你必须告诉webpack读取你的反应文件，转换所有内容并捆绑所有内容，然后“吐出”＃39;您浏览器实际将要执行的单个vanilla javascript文件（通常称为bundle.js）。

有一些选项供您考虑：

webpack - Webpack主要用于捆绑reactjs应用程序，并且具有非常丰富的配置API。
gulp - 更像是一个任务管理器，然后是一个捆绑本身，但它可以完成工作。
parcel - 正如parcel本身喜欢的那样：＆＃34;快速，零配置的Web应用程序捆绑器＆＃34;。零配置意味着ZERO配置。有利于开发，但如果您想添加插件或个性化您的构建以进行生产，则不是很好。

如何让Babel和React使用我的Express应用程序？

1 个答案: