我是 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 运行这样的应用程序)
最佳答案
你可以像这样安装 react-scripts npm install --save-dev react-scripts
。
然后您将能够运行此命令:react-scripts start
在项目的根目录(package.json 所在的位置)。
如果你不想使用命令,你可以按照How to run a React app with Webstorm上的教程进行操作。
基本上,要启动一个 React 应用程序,您需要运行一个命令 (npm start
);如果你想使用webstorm的启动按钮,你需要将它绑定(bind)到命令上。从这个link :
- 选择运行 |在主菜单上编辑配置。
- 单击工具栏上的添加,然后从弹出列表中选择 npm。
- 在运行/调试配置:打开的 NPM 对话框中,指定运行配置的名称、要执行的 npm 命令行命令、要运行的脚本(使用空格作为分隔符)、包的位置。从中检索脚本定义的 json 文件,以及用于执行脚本的命令行参数。 指定 Node 可执行文件的位置以及要传递给该可执行文件的 Node.js 特定选项,有关详细信息,请参阅 Node 参数。
关于node.js - 无法使用 WebStorm 运行 React 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47908421/