意外的保留字“导入”反应到 nodejs 应用程序中答案

【问题标题】：Unexpected reserved word 'import' react into nodejs app意外的保留字“导入”反应到 nodejs 应用程序中
【发布时间】：2017-03-22 17:04:43
【问题描述】：

在 app js 文件的开头安装和导入 react 和 react 路由包，但是得到这个错误：

(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^
SyntaxError: Unexpected reserved word

在我的 app.js 文件中：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

var express = require('express'),
...

【问题讨论】：

import 语句只能出现在顶级范围内。您不能在函数内部导入。
@jared 我在文件顶部导入，没有在函数中导入
在您发布的带有错误的代码中，它显示了一个导入语句在包装函数中，该语句可能由代码转换器应用。重要的是运行的代码，而不是您最初编写的代码。

标签： javascript reactjs

【解决方案1】：

你是 ES2015，你需要像 Babel 这样的转译器。

要使其正常工作，您首先需要安装一些软件包：

$ npm install --save-dev babel-core babel-preset-es2015 babel-preset-react

接下来，将以下内容添加到您的 package.json：

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

或者，如果您没有 package.json，请在工作目录中创建一个名为 .babelrc 的文件，其中包含以下内容：

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

注意

它不是完全重复的，但它与this 帖子的答案相同。感谢“robertklep”的回答。

更新

如果您使用的是 Webpack，请确保您是通过模块加载器加载 babel。

module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      },
}

【讨论】：

我确实安装了 babel 和所有其他软件包，但它仍然无法正常工作：/ 我添加了上面的代码
你在使用 Webpack 吗？
是的，使用 webpack。但是我还没有生成一个 bundle js 文件。还在 package.json 中的脚本中添加了 "babel": "babel", "webpack": "webpack"
我也在使用在线 IDE (cloud9) 来运行它。
@Jon 如果没有，你应该加载 babel 模块。我更新了我的答案。我希望它能解决问题。