Nodejs5和babel中的“意外令牌导入”?


192

在js文件中,我使用import代替require

import co from 'co';

并尝试通过nodejs直接运行它,因为它说import是“运输功能”和支持,没有任何运行时标记(https://nodejs.org/en/docs/es6/),但是我遇到了一个错误

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

SyntaxError: Unexpected token import

然后我试图用通天塔

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

仍然有相同的错误,意外的令牌导入?

我如何摆脱它?


14
@FelixKling:尽管链接问题的答案当然也回答了这个问题,但很难将此问题视为该问题的重复。无论如何,我很高兴在这里有这个,因为Google将我直接带到这里,因为所描述的语法错误与我所看到的完全匹配。老实说,我很高兴OP发布此文章,而不是搜索一个恰好合适的答案来寻找一些相关问题。
Scott Sauyet

3
npm i --save-dev babel-cli 为我修复了此问题
ChuckJHardy '16

2
我投票取消将其标记为重复项,我认为这是一个单独的问题。
TWR Cole

3
这不是重复项。另外一个解决方案,我想交的是你有这个插件在仔细检查.babelrc"transform-es2015-modules-commonjs"
Dan Dascalescu

7
重复(应该)可以。这是人类工作方式的重要组成部分。@ScottSauyet所说的是原因之一。具有不同观点的不同解释是另一种。多年来,作为一名常客,整个“重复狩猎”对我来说无济于事。我希望它会停止。
Stijn de Witt

Answers:


202

来自babel 6发行说明:

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

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

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

或与纱线

yarn add babel-preset-es2015 --dev

并在我的.babelrc中启用了预设

{
  "presets": ["es2015"]
}

14
好答案。不幸的是,您仍然需要使用require(),并且不能将import用于npm软件包。
Jagtesh Chadha 2015年

24
babel-nodees2015react预设一起使用。同样的错误。
模糊的

3
不起作用。是的,这是必需的,但不能使导入工作。
still_dreaming_1

6
对我来说,这是一个简单的解决方法。我陷入了隧道视觉中,试图将代码从一个react / babel项目改编为另一个es5项目,并同时升级到es6语法。在脚本下的package.json中,我忘记将“ node run”替换为“ babel-node run.js”。是的,我有点sheep。:)
joezen777 '16

2
JS生态系统是如此简单
Rodrigo

51

在实现模块之前,您可以使用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-node6https://babeljs.io/docs/usage/cli/


16
babel员工的最新建议是使用babel-preset-env来检测要运行的polyfill,而不是babel-preset-node*。在.babelrc使用:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
RONEN

之后,我开始收到错误(无法识别的令牌“ <”):server.js:Unexpected token (37:12) 35 | const initialState = store.getState(); 36 | const componentHTML = renderToString( > 37 | <Provider store={store}> | ^ 38 | <RouterContext {...props} /> 39 | </Provider>, 40 | );
AK

26
  1. 安装软件包:babel-corebabel-polyfillbabel-preset-es2015
  2. .babelrc使用内容创建:{ "presets": ["es2015"] }
  3. 不要import在主入口文件中放置语句,而要使用另一个文件,例如:app.js和您的主入口文件应该是必需的,babel-core/register并且babel-polyfill要使babel首先在其他任何地方工作。然后,您可以要求app.jswhere import语句。

例:

index.js

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

app.js

import co from 'co';

它应该与一起使用node index.js


1
这是可用于开发的简单解决方法。虽然对于生产,您应该始终编译es5代码。
乔纳斯·德罗列夫

等等...这是我的想法吗?几个月前,我曾梦想过可以通过自定义额外解析现有语言(相同语言)来扩展javascript / perl /任何语言而无需更新。这是这里发生的事情吗???
德米特里(Dmitry)

极好的答案。但是在脚本中,您可以在下面放置类似内容。因此,您可以在任何文件中使用。“ scripts”:{“ build”:“ babel src -d dist”,“ start”:“ node dist / index.js”}
gkarthiks

15

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

要使它与Babel 6.24.1+一起使用,请babel-preset-env改用:

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

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

{
  "presets": ["env"]
}

有关更多信息,请参见Babel文档


有没有办法通过CLI做到这一点?
jcollum


5

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

在您的工作目录中创建:

  • 两个文件夹。一种用于预编译的es2015代码。另一个用于babel的输出。我们将它们分别命名为“ 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(aka --out-dir)标志将源目录转换为输出目录: npm run transpile-es2015
  • 从输出目录运行代码! node lib/index.js

没有工作不幸。Unexpected token import
dipole_moment

1
确保babel命令在您的搜索路径中。这是一个细微的变化。 package.json:{“脚本”:{“ transpile”:“ ./node_modules/.bin/babel src -d lib”},“ devDependencies”:{“ babel-cli”:“ ^ 6.24.1”,“ babel-preset- env“:” ^ 1.6.0“}} .babelrc:{{预设”:[“ env”]}
Maksim Yegorov

5

当前方法是使用:

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

然后在 .babelrc

{
    "presets": ["env"]
}

此安装Babel支持最新版本的js(es2015及更高版本)签出babeljs

如下运行js文件时,不要忘记babel-nodepackage.json使用中添加到脚本中。

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

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

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

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

然后 npm run populate


3

您必须使用babel-preset-envnodemon进行热重装。

然后创建具有以下内容的.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"
  }

或者只是使用以下样板:

样板:node-es6


2
  • 安装->“ 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"
}

并在根“ .babelrc”中为babel创建文件

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

并在终端中运行npm start


1

涉及以下步骤来解决此问题:

1)安装CLI和env预设

$ 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

0

我已完成以下操作来克服此问题(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

0

@jovi您需要做的就是添加.babelrc文件,如下所示:

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

并通过npm将这些插件安装为devdependences。

然后再次尝试babel-node ***。js。希望这可以帮到你。


-4

在您的应用程序中,必须声明require()模块,而不使用'import'关键字:

const app = require("example_dependency");

然后,创建一个.babelrc文件:

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

然后,在gulpfile中,确保声明require()模块:

var gulp = require("gulp");
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.