当我运行“npm run build-dev”时，我收到语法错误，触发“browserify”。这应该在我的JSX文档（下面）中转换我的JSX标记，但它只是在开始标记处抛出语法错误。我真的很难看到这里出了什么问题，我发现这与我最近做的另一个项目之间没有任何区别。
尝试了Node.js版本：v9.7.1，v8.9.4尝试了npm版本：v5.7.1，v5.6.0
我的HTML文档：
<html>
<head>
<meta charset="utf-8" />
<style>
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
div.main {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
</style>
</head>
<body>
<div id="doc"/>
<script src="page.js"></script>
</body>
</html>
我的package.json：
{
"name": "AnimationTest",
"version": "0.0.1",
"description": "Learning how to use CSS animations with JS/react triggers.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-js": "browserify index.js -t babelify -o page.js",
"build-js-dev": "browserify index.js -d -t babelify -o page.js",
"build-dev": "npm run build-js-dev",
"build": "npm run build-js"
},
"repository": {
"type": "git",
"url": "."
},
"author": "D. Scott Boggs",
"license": "AGPL-3.0",
"dependencies": {
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"babel-core": "^6.26.0"
},
"devDependencies": {
"browserify": "^15.2.0",
"babelify": "^8.0.0"
}
}
我的index.jsx：
import React from 'react';
import ReactDOM from 'react-dom';
class AnimationTest extends React.Component {
constructor(props) {
console.log("AnimationTest constructor reached.");
super(props);
}
render() {
console.log("AnimationTest.render: Beginning rendering of document root");
return (
<div id='main'/>
);
}
}
ReactDOM.render(
<AnimationTest />,
document.getElementById('doc')
);
所以事实证明我失踪了.babelrc。我补充道
{
"presets": ["env", "react"]
}
到my-project-folder / .babelrc，现在编译没有错误。谢谢。