Nodejs5和babel中的“意外令牌导入”？答案

【问题标题】："unexpected token import" in Nodejs5 and babel?Nodejs5和babel中的“意外令牌导入”？
【发布时间】：2016-02-09 19:46:45
【问题描述】：

在 js 文件中，我使用 import to 而不是 require

import co from 'co';

并试图通过 nodejs 直接运行它，因为它说导入是“运送功能”并且支持没有任何运行时标志 (https://nodejs.org/en/docs/es6/)，但我遇到了错误

import co from 'co';
^^^^^^

SyntaxError: Unexpected token import

然后我尝试使用 babel

npm install -g babel-core
npm install -g babel-cli
npm install babel-core //install to babel locally, is it necessary?

并由

运行

babel-node js.js

仍然有同样的错误，意外的令牌导入？

我怎样才能摆脱它？

【问题讨论】：

@FelixKling：虽然链接问题的答案肯定也回答了这个问题，但很难将这个问题看作是那个问题的重复。无论如何，我很高兴这里有这个，因为谷歌直接把我带到了这里，因为描述的语法错误与我看到的完全匹配。老实说，我很高兴 OP 发布了这个，而不是搜索一个有点相关的问题，而答案恰好适合。
npm i --save-dev babel-cli 为我修复了它...
我投票取消将此标记为重复，我觉得这是一个单独的问题。
这不是重复的。我想发布的另一种解决方案是仔细检查您在 .babelrc:"transform-es2015-modules-commonjs" 中是否有此插件。
重复（应该）没问题。这是人类工作方式的重要组成部分。 @ScottSauyet 说的是原因之一。不同的观点不同的解释是另一回事。多年来，这整个“重复狩猎”对我作为一个常客的我来说非常无益。我希望它会停止。

标签： javascript node.js ecmascript-6 babeljs package.json

【解决方案1】：

来自 babel 6 发行说明：

由于 Babel 专注于成为 JavaScript 工具平台而不是 ES2015 转译器，因此我们决定让所有插件都可选择加入。这意味着当您安装 Babel 时，它将不再默认转译您的 ES2015 代码。

在我的设置中，我安装了 es2015 预设

npm install --save-dev babel-preset-es2015

或者用纱线

yarn add babel-preset-es2015 --dev

并在我的 .babelrc 中启用预设

{
  "presets": ["es2015"]
}

【讨论】：

好答案。不幸的是，你仍然需要使用 require() 并且不能对 npm 包使用 import。
我将babel-node 与es2015 和react 预设一起使用。同样的错误。
不起作用。是的，这是必需的，但它不会使导入工作。
对我来说这是一个简单的修复。我陷入了隧道视野，试图将代码从一个 react/babel 项目改编到另一个 es5 项目并同时升级到 es6 语法。在脚本下的 package.json 中，我忘记将“node run”替换为“babel-node run.js”。是的，我觉得很害羞。 :)
JS 生态如此简单

【解决方案2】：

在实现模块之前，您可以使用 Babel“转译器”来运行您的代码：

npm install --save babel-cli babel-preset-node6

然后

./node_modules/babel-cli/bin/babel-node.js --presets node6 ./your_script.js

如果你不想输入--presets node6，你可以将其保存为.babelrc 文件：

{
  "presets": [
    "node6"
  ]
}

见https://www.npmjs.com/package/babel-preset-node6和https://babeljs.io/docs/usage/cli/

【讨论】：

babel 人的最新建议是使用babel-preset-env 来检测要运行的polyfill，而不是babel-preset-node*。在.babelrc 中使用：{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
在此之后我开始收到错误（无法识别的令牌'Unexpected token (37:12) 35 | const initialState = store.getState(); 36 | const componentHTML = renderToString( > 37 | <Provider store={store}> | ^ 38 | <RouterContext {...props} /> 39 | </Provider>, 40 | );

【解决方案3】：

安装包：babel-core、babel-polyfill、babel-preset-es2015
使用内容创建.babelrc：{ "presets": ["es2015"] }
不要将import声明放在你的主入口文件中，使用另一个文件，例如：app.js，你的主入口文件应该需要babel-core/register和babel-polyfill，以使babel首先单独工作.然后你可以要求app.js where import 声明。

例子：

index.js

require('babel-core/register');
require('babel-polyfill');
require('./app');

app.js

import co from 'co';

它应该适用于node index.js。

【讨论】：

这是一个可用于开发的简单解决方法。虽然在生产环境中你应该总是编译你的 es5 代码。
等等...这是我想的吗？几个月前，我有一个梦想，即可以通过自定义额外解析相同语言的现有语言来扩展 javascript/perl/任何语言而无需更新。这是怎么回事？？？
优秀的答案。但是在脚本中，您可以放置如下内容。所以你可以在任何文件中使用。 "scripts": { "build": "babel src -d dist", "start": "node dist/index.js" }

【解决方案4】：

babel-preset-es2015 现在已弃用，如果您尝试使用 Laurence 的解决方案，您会收到警告。

要在 Babel 6.24.1+ 中使用此功能，请改用 babel-preset-env：

npm install babel-preset-env --save-dev

然后将env 添加到.babelrc 的预设中：

{
  "presets": ["env"]
}

请参阅the Babel docs 了解更多信息。

【讨论】：

有没有办法用 CLI 做到这一点？

【解决方案5】：

如果您将预设用于 react-native，它会接受导入

npm i babel-preset-react-native --save-dev

并把它放在你的 .babelrc 文件中

{
  "presets": ["react-native"]
}

在您的项目根目录中

https://www.npmjs.com/package/babel-preset-react-native

【讨论】：

【解决方案6】：

您可能正在运行未编译的文件。让我们开始清洁吧！

在你的工作目录中创建：

两个文件夹。一种用于预编译的 es2015 代码。另一个用于 babel's 输出。我们将它们分别命名为“src”和“lib”。

包含以下对象的 package.json 文件：

{ 
  "scripts": {
      "transpile-es2015": "babel src -d lib"
  },
  "devDependencies": {
      "babel-cli": "^6.18.0",
      "babel-preset-latest": "^6.16.0"
  }
}

一个名为“.babelrc”的文件，包含以下说明： {"presets": ["latest"]}
最后，在 src/index.js 文件中编写测试代码。在你的情况下： import co from 'co'.

通过您的控制台：

安装您的软件包： npm install
使用我们的 package.json 中指定的 -d（又名 --out-dir）标志将源目录转换为输出目录： npm run transpile-es2015
从输出目录运行您的代码！ node lib/index.js

【讨论】：

不幸的是没有工作。 Unexpected token import.
确保babel 命令在您的搜索路径中。这是一个细微的变化。 package.json: { "scripts": { "transpile": "./node_modules/.bin/babel src -d lib" }, "devDependencies": { "babel-cli": "^6.24.1", "babel -preset-env": "^1.6.0" } } .babelrc: { "presets": ["env"] }

【解决方案7】：

目前的方法是使用：

npm install --save-dev babel-cli babel-preset-env

然后在.babelrc

{
    "presets": ["env"]
}

此安装 Babel 支持最新版本的 js（es2015 及更高版本）查看 babeljs

不要忘记将babel-node 添加到package.json 内的脚本中，如下所示在运行您的js 文件时使用。

"scripts": {
   "test": "mocha",
    //Add this line to your scripts
   "populate": "node_modules/babel-cli/bin/babel-node.js" 
},

现在您可以在终端内npm populate yourfile.js。

如果您正在运行 windows 并且运行错误内部或外部命令无法识别，请使用脚本前面的节点，如下所示

node node_modules/babel-cli/bin/babel-node.js

然后npm run populate

【讨论】：

【解决方案8】：

你必须使用 babel-preset-env 和 nodemon 进行热重载。

然后创建 .babelrc 文件，内容如下：

{
  "presets": ["env"]
}

最后，在 package.json 中创建脚本：

"scripts": {
    "babel-node": "babel-node --presets=env",
    "start": "nodemon --exec npm run babel-node -- ./index.js",
    "build": "babel src -d dist"
  }

或者只是使用这个样板：

Boilerplate: node-es6

【讨论】：

【解决方案9】：

安装 --> "npm i --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0"

在 package.json 文件中添加脚本 "start": "babel-node server.js"

    {
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "lodash": "^4.17.4",
    "mongoose": "^5.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

并在根目录下为 babel 创建文件 ".babelrc"

    {
    "presets":[
        "es2015",
        "stage-0"
    ]
}

在终端运行 npm start

【讨论】：

【解决方案10】：

涉及以下步骤来解决问题：

1) 安装 CLI 和环境预设

$ npm install --save-dev babel-cli babel-preset-env

2) 创建一个.babelrc文件

{
  "presets": ["env"]
}

3) 在package.json

中配置npm start

"scripts": {
    "start": "babel-node ./server/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

4) 然后启动应用程序

$ npm start

【讨论】：

【解决方案11】：

我已经做了以下解决问题（ex.js 脚本）

问题

$ cat ex.js
import { Stack } from 'es-collections';
console.log("Successfully Imported");

$ node ex.js
/Users/nsaboo/ex.js:1
(function (exports, require, module, __filename, __dirname) { import { Stack } from 'es-collections';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:194:16)
    at bootstrap_node.js:618:3

解决方案

# npm package installation
npm install --save-dev babel-preset-env babel-cli es-collections

# .babelrc setup
$ cat .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

# execution with node
$ npx babel ex.js --out-file ex-new.js
$ node ex-new.js
Successfully Imported

# or execution with babel-node
$ babel-node ex.js
Successfully Imported

【讨论】：

【解决方案12】：

@jovi 你需要做的就是像这样添加 .babelrc 文件：

{
  "plugins": [
    "transform-strict-mode",
    "transform-es2015-modules-commonjs",
    "transform-es2015-spread",
    "transform-es2015-destructuring",
    "transform-es2015-parameters"
  ]
}

并使用 npm 将这些插件安装为 devdependences。

然后再次尝试 babel-node ***.js。希望对您有所帮助。

【讨论】：

【解决方案13】：

在您的应用中，您必须声明您的 require() 模块，而不是使用“import”关键字：

const app = require("example_dependency");

然后，创建一个 .babelrc 文件：

{
"presets": [ 
    ["es2015", { "modules": false }]
]
}

然后，在您的 gulpfile 中，请务必声明您的 require() 模块：

var gulp = require("gulp");

【讨论】：