Question

我使用WebStorm最新版本来处理Node.js（express.js）框架工作。我已经设置了我的Babel，以便我可以使用ES6语法，例如：

import express from "express".

Babel工作正常，它会生成包含index.js.map的index.js。

问题是在运行项目时我仍然会收到错误

/usr/local/Cellar/node/7.10.0/bin/node /Volumes/Elements/Learning/Node/Project/NodeWebStorm/bin/www
/Volumes/Elements/Learning/Node/Project/NodeWebStorm/routes/index.js:1
(function (exports, require, module, __filename, __dirname) { import express from "express"
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/Elements/Learning/Node/Project/NodeWebStorm/app.js:8:13)

Process finished with exit code 1

这是我的项目

这是babel生成的我的index.js。好吧，我甚至试图单独运行它没有错误

'use strict';

var _express = require('express');

var _express2 = _interopRequireDefault(_express);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// let express = require("express");
var router = _express2.default.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    // res.render('index', { title: 'Express' });
    res.render('newindex', { title: 'Hey', message: 'Hello there!' });
});

router.get('/about', function (req, res) {
    res.send('what the hell');
});

router.get('/new', function (req, res) {
    res.json({ "test": "new value" });
});

router.get('/new/path', function (req, res) {
    res.send("what the new");
});

router.get('/newpath', function (req, res) {
    res.send('this is new path');
});

router.get('/testpath', function (req, res) {
    res.send('what the hell');
});

module.exports = router;
//# sourceMappingURL=index.js.map

模板来自来自webstorm的node.js表达模板。我是否需要添加任何额外步骤？

修改

我还将语言 - 框架 - javascript更改为ES6，但仍然是错误

更新我的配置

Answer 1

为了说清楚：你的问题与WebStorm完全无关，错误来自运行代码的Node.js解释器。 Node.js本身仍然不支持ES6模块（实际上，没有JavaScript运行时当前支持它们 - ECMAScript没有定义“Loader”规范，它决定了模块如何插入运行时.Loader规范由WHATWG定义，但是尚未最终确定）。因此，要接受ES6导入/导出，您需要使用转换器。目前的行业标准是Babel

要使工作正常，请尝试以下方法：

使用npm install --save-dev babel-cli babel-preset-env
在项目根目录中创建.babelrc文件：

{ “预设”：[“env”] }
，将-r babel-register传递给节点：

Answer 2

与@lena相同，但我使用的是“ @ babel / register”，我添加了--require @ babel / register

Answer 3

作为使用 Node.js 运行配置的替代方法，您可以考虑使用 npm 配置并直接使用适当的脚本。例如

在package.json

"scripts": {
  "start": "babel-node src/index.js"
}

在网络风暴中： https://i.stack.imgur.com/jrj8H.png

Difference between running babel-register vs babel-node

使用WebStorm配置Babel以将ES6与WebStorm Node.js项目一起使用

修改

3 个答案: