我正在尝试使用babel将一些React代码编译为javascript。我的项目目录是这样设置的:
在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组件已被注释掉。据我所知,我已经囊括了所有必要的功能。任何帮助,将不胜感激。
It's not called
babel.rc
, but.babelrc
, also your.babelrc
, must be in the root directory of your project, not in in yoursrc/
directory.