ChatGPT解决这个技术问题 Extra ChatGPT

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

在 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 说的是原因之一。不同的观点不同的解释是另一回事。多年来,这整个“重复狩猎”对我作为一个常客的我来说非常无益。我希望它停止。

J
Joe Lloyd

来自 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-nodees2015react 预设一起使用。同样的错误。
不工作。是的,这是必需的,但它不会使导入工作。
对我来说,这是一个简单的修复。我陷入了隧道视野,试图将代码从一个 react/babel 项目改编到另一个 es5 项目并同时升级到 es6 语法。在脚本下的 package.json 中,我忘记将“node run”替换为“babel-node run.js”。是的,我觉得很害羞。 :)
JS 生态如此简单
v
vincent mathew

在模块被实现之前,你可以使用 Babel “transpiler”来运行你的代码:

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/


babel 人员的最新建议是使用 babel-preset-env 来检测要运行的 polyfill,而不是 babel-preset-node*。在 .babelrc 中使用:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
在此之后我开始收到错误(无法识别的令牌'<'):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 | );
A
Adiono

安装包: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');

应用程序.js

import co from 'co';

它应该适用于 node index.js


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

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 做到这一点?
j
jde-chil

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

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

并将其放入您的 .babelrc 文件中

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

在您的项目根目录中

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


D
DanielBarbarian

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

在您的工作目录中创建:

两个文件夹。一种用于预编译的 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 文件中编写测试代码。在您的情况下:从“co”导入 co。

通过您的控制台:

安装你的包: npm install

使用我们的 package.json 中指定的 -d(又名 --out-dir)标志将源目录转换到输出目录: npm run transpile-es2015

从输出目录运行您的代码!节点库/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"] }
I
Isaac Sekamatte

目前的方法是使用:

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

然后在 .babelrc

{
    "presets": ["env"]
}

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

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

"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


P
Priyanshu Chauhan

您必须使用 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


l
lior ben yosef

安装 --> "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


K
KARTHIKEYAN.A

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

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

n
nsaboo

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

高建德

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

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

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

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


S
SandPiper

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

const app = require("example_dependency");

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

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

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

var gulp = require("gulp");