Javascript 我如何获得Babel并对使用我的Express应用程序作出反应？

很抱歉可能是一个noob问题，但我已经阅读了很多文章，试图让这个工作，但我没有成功

我喜欢在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"]
}

My 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添加到现有应用程序”：

从“React”导入React；
从“react dom”导入react dom；
$（文档）.ready（函数（）{
ReactDOM.render(
你好，React正在工作，
document.getElementById（'root'））
);
});

---

但是，每次我通过“npm start”启动应用程序时，都会得到一个“未捕获的SyntaxError:意外标记”看起来您的应用程序的React部分缺少一个transpiler

当您运行babel node时，它会在后端传输代码，以便node能够理解它

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

简而言之，您必须告诉webpack读取您的react文件，传输所有内容并打包所有内容，然后“吐出”一个您的浏览器实际要执行的普通javascript文件（通常称为bundle.js）

有一些选项供您考虑：

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

• -更像是任务管理器，而不是绑定器本身，但它完成了任务

• -正如parcel自己喜欢说的那样：“快速、零配置的web应用程序绑定器”。零配置意味着零配置。这对开发很有好处，但如果您想添加插件或个性化生产构建，就没那么好了

---

（与此无关，但jQuery 1？！）您如何传输JSX？（我刚刚复制了最快的jQuery CDN脚本标记，我发现它只是一个旧版本哈哈）我觉得Babel已经为我传输JSX了。我不确定。我应该怎么做？我可能会做一个React教程。仅仅在你的node_模块文件夹中使用Babel是不够的。你可能需要使用webpack

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

$( document ).ready(function() {

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

});