使用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但仍錯誤

更新我的配置

來源

2017-05-27 Lê Khánh Vinh

我只是改變了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到節點：

來源

2017-05-27 19:15:09 lena

非常感謝。像魅力一樣工作。我是否需要啓用文件觀察器才能使用babel進行轉儲（自動創建包含轉儲文件的dist文件夾）？或者只是上面的配置就夠了？ –

添加'-r babel-register'就足夠了 - 通過此選項，代碼即時編譯。但是，您也可以使用babel文件觀察器預編譯文件 - 在這種情況下，您需要確保在運行配置中將編譯的文件（而不是原始文件）指定爲「JavaScript文件」。運行預編譯代碼時，應該省略'-r babel-register' – lena

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

回答

相關問題