使用babelify时响应“返回”意外令牌

Question

我有一些简单的反应代码，因为我刚开始学习，我想我的开发环境可能会搞砸。下面是我的代码(直接来自reactjs教程https://reactjs.org/docs/components-and-props.html )：

-包装.：

    {
        "author": "Damien Bell",
        "main": "main.js",
        "name": "Learning",
        "version": "0.0.1",
        "dependencies": {
            "babel-core": "^6.26.0",
            "react": "^16.2.0",
            "react-dom": "16.2.0",
            "react-router": "4.2.0"
        },
        "devDependencies": {
            "babelify": "^8.0.0",
            "browserify": "^16.1.0",
            "watchify": "^3.10.0"
        },
        "scripts": {
            "start": "browserify -t babelify --outfile ./App.js reactive.jsx"
        }
    }

-Reactive.jsx

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

    class Welcome extends React.Component {
        render() {
        return <h1>Hello, {this.props.name}</h1>;
        }
    }


    ReactDOM.render(<Welcome />, document.getElementById("app") );

在运行"npm“时，我得到以下错误：

 > browserify -t babelify --outfile ./App.js reactive.jsx

 SyntaxError: c:/Electron/reactive.jsx: Unexpected token (6:10)
   4 | class Welcome extends React.Component {
   5 |   render() {
 > 6 |     return <h1>Hello, {this.props.name}</h1>;
     |            ^
   7 |   }
   8 |   }
   9 |

很显然，babelify并不理解您将尝试使用jsx，您需要指定这一点。还有一件奇怪的事情是，如果您试图将其作为参数传递，如下面的答案所述，您可能会发现一个错误，即“导入”和“导出”可能只出现在'sourceType:模块‘中。

为此，我创建了一个.babelrc文件并相应地更改了package.json：

.babelrc

    {
    "plugins": [ "transform-class-properties", "transform-decorators-legacy" ],
    "presets": ["es2015", "react", "stage-0"]
    }

package.json

    "browserify": {
        "transform": [
            [
                "babelify"
            ]
        ]
    },
    "dependencies": {
        "babel-core": "^6.26.0",
        "react": "^16.2.0",
        "react-dom": "16.2.0",
        "react-router": "4.2.0"
    },
    "devDependencies": {
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "babelify": "^8.0.0",
        "browserify": "^16.1.0",
        "watchify": "^3.10.0"
    },
    "scripts": {
        "start": "browserify -t babelify --outfile ./App.js reactive.jsx && electron ."
    }

Answer 1

发生此错误的原因是，在您当前的配置中，babelify不理解React的JSX语法。要解决这个问题，请通过npm安装babel-preset-react，并将start脚本更改为包含一个React环境：

...
"start":"browserify -t 'babelify --presets react' --outfile ./App.js reactive.jsx"
...