Babel无法识别React组件

我正在尝试使用babel将一些React代码编译为javascript。我的项目目录是这样设置的:

Project directory

在src下的App.jsx文件中,我有:

const continents = ['Africa','America','Asia','Australia','Europe'];
const helloContinents = Array.from(continents, c => `Hello ${c}!`);
const message = helloContinents.join(' ');

const element = (
  <div title="Outer div">
    <h1>{message}</h1>
  </div>
);

ReactDOM.render(element, document.getElementById('contents'));

我在src下添加了babel.rc文件,其中包含

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11",
        "edge": "15",
        "safari": "10",
        "firefox": "50",
        "chrome": "49"
      }
    }],
    "@babel/preset-react"
  ]
}

我的package.json文件如下所示:

{
  "name": "pro-mern-stack-2",
  "version": "1.0.0",
  "description": "learning MERN",
  "main": "index.js",
  "scripts": {
    "start": "node server/server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "babel src --out-dir public"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.9.4",
    "babel-preset-react": "^6.24.1"
  }
}

When I run npm run compile I get the following error:

> pro-mern-stack-2@1.0.0 compile /home/vagrant/pro-mern-stack-2
> babel src --out-dir public

SyntaxError: src/App.jsx: Unexpected token (6:2)
  4 |
  5 | const element = (
> 6 |   <div title="Outer div">
    |   ^
  7 |     <h1>{message}</h1>
  8 |   </div>
  9 | );
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pro-mern-stack-2@1.0.0 compile: `babel src --out-dir public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pro-mern-stack-2@1.0.0 compile script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2020-05-23T13_50_03_224Z-debug.log
vagrant@scotchbox:~/pro-mern-stack-2$

App.js是在公共场所生产的,但是React组件已被注释掉。据我所知,我已经囊括了所有必要的功能。任何帮助,将不胜感激。

评论
shf939899
shf939899

It's not called babel.rc, but .babelrc, also your .babelrc, must be in the root directory of your project, not in in your src/ directory.

点赞
评论