如何让 Babel 和 React 与我的 Express 应用程序一起工作？

Question

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

我喜欢以 express 方式构建我的应用程序，并希望开始将 React 用于我的一些可重用组件。

我希望能够使用 JSX 来获得更简洁的语法，并且一直在尝试让 Babel 在我的基本 Express 应用程序上工作。任何帮助将不胜感激！

使用 express CLI 后，我有一个基本的 express 应用程序：

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 添加到现有应用程序”中的 React 组件：

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

$( document ).ready(function() {

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

});

但是，每次我通过“npm start”启动我的应用程序时，我总是在控制台中收到“Uncaught SyntaxError: Unexpected token

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

Answer 1

您的应用程序的 React 部分似乎缺少转译器。

当你运行 babel-node 时，它​​会在你的后端编译代码，以便 Node 可以理解它。你必须对你的 script.js 做同样的事情

您的浏览器似乎正在为您的浏览器提供 ES6 语法 javascript，而该浏览器只能理解 vanilla javascript。您可能需要一个打包程序（如 webpack）来将您的代码转换为 vanilla 并将结果提供给浏览器。

简而言之，您必须告诉 webpack 读取您的 react 文件，转译所有内容并捆绑所有内容，然后“吐出”一个您的浏览器实际将执行的 vanilla javascript 文件（通常称为 bundle.js）。

有一些选项供您考虑：

• webpack - Webpack 主要用于捆绑 reactjs 应用程序，并具有非常丰富的配置 API。

• gulp - 更像是一个任务管理器，而不是一个打包器本身，但它可以完成工作。

• parcel - 正如 parcel 本身喜欢说的那样：“快速、零配置的 Web 应用程序捆绑器”。零配置意味着零配置。适合开发，但如果您想添加插件或个性化您的构建以用于生产，则不是那么好。