Question

当我运行“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')
);

Answer 1

事实证明我失踪了.babelrc。我添加了

{
  "presets": ["env", "react"]
}

到my-project-folder / .babelrc，现在编译没有错误。感谢。

JSX标记

1 个答案: