使用WebStorm配置babel使用ES6和WebStorm Node.js项目

问题描述：

您好我正在使用WebStorm最新版本来使用Node.js（express.js）框架工作。我已经把我的babel这样我就可以使用ES6语法（例如使用WebStorm配置babel使用ES6和WebStorm Node.js项目

import express from "express".

通天工作确定它产生含有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

Herer是我的项目

这里是我的index.js这通天g^enerate。看起来好，我甚至试图单独运行没有错误

'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但仍错误

更新我的配置

我只是改变了Java脚本语言从ECMA 5 ECMA 2015年在WS设置和错误逃走了。 – Jankapunkt

嗨，我已经更改为ECMA2015，但仍然错误。我从exppress.js运行node.js模板 –

任何人都有理想的 –

答

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

为了工作上的事情，请尝试以下操作：

使用npm install --save-dev babel-cli babel-preset-env
创建.babelrc文件中项目的根目录项目中安装巴贝尔：

{ “预设”：[“env”] }
i n您的Node.js的运行配置，通过-r babel-register到节点：

非常感谢。像魅力一样工作。我是否需要启用文件观察器才能使用babel进行转储（自动创建包含转储文件的dist文件夹）？或者只是上面的配置就够了？ –

添加'-r babel-register'就足够了 - 通过此选项，代码即时编译。但是，您也可以使用babel文件观察器预编译文件 - 在这种情况下，您需要确保在运行配置中将编译的文件（而不是原始文件）指定为“JavaScript文件”。运行预编译代码时，应该省略'-r babel-register' – lena

使用WebStorm配置babel使用ES6和WebStorm Node.js项目

相关推荐