无法使用 WebStorm 运行 React 应用程序

Question

我对 React 完全陌生，我正在尝试遵循 react official website 上的示例。

使用 WebStorm 或 intellij idea Ultimate 运行计算器应用程序（index.js）时

output of npm run start or npm start

我得到这个错误：

(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^
    SyntaxError: Unexpected token import
        at createScript (vm.js:80:10)
        at Object.runInThisContext (vm.js:139:10)
        at Module._compile (module.js:599:28)
        at Object.Module._extensions..js (module.js:646:10)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Function.Module.runMain (module.js:676:10)
        at startup (bootstrap_node.js:187:16)
        at bootstrap_node.js:608:3

    Process finished with exit code 1

我的问题是如何使用 intellij idea Ultimate 运行这样的应用程序我尝试了什么：

npm install -g create-react-app
npm install -g eslint
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react
npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype

并将以下内容添加到 package.json：

"babel": {
  "presets": [ "es2015", "react" ]
}

或者到.babelrc

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

我的问题是如何使用 intellij idea Ultimate package.json 运行这样的应用程序

{
  "name": "emoji-search",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://ahfarmer.github.io/emoji-search",
  "devDependencies": {
    "gh-pages": "^1.1.0",
    "react-scripts": "^1.0.17"
  },
  "dependencies": {
    "github-fork-ribbon-css": "^0.2.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  },
  "babel": {
    "presets": [ "es2015", "react" ]
  }
}

（我的问题是如何使用 intellij idea Ultimate 运行这样的应用程序）

Answer 1

你可以像 npm install --save-dev react-scripts 这样安装 react-scripts。
然后您将能够在项目的根目录（package.json 所在的位置）运行此命令：react-scripts start。

如果你不想使用命令，可以关注How to run a React app with Webstorm上的教程

基本上，要启动一个 React 应用，你需要运行一个命令 (npm start)；如果要使用 webstorm 启动按钮，则需要将其绑定到命令。来自link：

1. 选择运行 |在主菜单上编辑配置。
2. 单击工具栏上的添加并从弹出列表中选择 npm。
3. 在打开的运行/调试配置：NPM 对话框中，指定运行配置的名称、要执行的 npm 命令行命令、要运行的脚本（使用空格作为分隔符）、包的位置。 json 文件以从中检索脚本的定义，以及用于执行脚本的命令行参数。 指定 Node 可执行文件的位置以及要传递给此可执行文件的 Node.js 特定选项，请参阅 Node 参数了解详细信息。