使用 WebStorm 配置 Babel 以将 ES6 与 WebStorm Node.js 项目一起使用 [英] Configure Babel with WebStorm to use ES6 with WebStorm Node.js project

问题描述

我正在使用 WebStorm 最新版本来处理 Node.js (express.js) 框架工作.我已经设置了 Babel 以便我可以使用 ES6 语法，例如:

从express"导入 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"^^^^^^语法错误:意外的令牌导入在 createScript (vm.js:53:10)在 Object.runInThisContext (vm.js:95:10)在 Module._compile (module.js:543:28)在 Object.Module._extensions..js (module.js:580:10)在 Module.load (module.js:488:32)在 tryModuleLoad (module.js:447:12)在 Function.Module._load (module.js:439:3)在 Module.require (module.js:498:17)在要求(内部/module.js:20:19)在对象<匿名>(/Volumes/Elements/Learning/Node/Project/NodeWebStorm/app.js:8:13)进程以退出代码 1 结束

这是我的项目

这是我的 babel 生成的 index.js.看起来不错，我什至尝试单独运行它，没有错误

'use strict';var _express = require('express');var _express2 = _interopRequireDefault(_express);函数 _interopRequireDefault(obj) { 返回 obj &&obj.__esModule ?对象:{默认值:对象}；}//let express = require("express");var router = _express2.default.Router();/* 获取主页.*/router.get('/', function (req, res, next) {//res.render('index', { title: 'Express' });res.render('newindex', { title: 'Hey', message: '你好！' });});router.get('/about', function (req, res) {res.send('什么鬼');});router.get('/new', function (req, res) {res.json({ "test": "new value" });});router.get('/new/path', function (req, res) {res.send("什么是新的");});router.get('/newpath', function (req, res) {res.send('这是新路径');});router.get('/testpath', function (req, res) {res.send('什么鬼');});module.exports = 路由器；//# sourceMappingURL=index.js.map

模板来自webstorm的node.js express模板.我需要添加任何额外的步骤吗?

编辑

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

更新我的配置

解决方案

澄清一下:您的问题与 WebStorm 完全无关，错误来自运行您的代码的 Node.js 解释器.Node.js 本身仍然不支持 ES6 模块(实际上，目前没有 JavaScript 运行时支持它们 - ECMAScript 没有定义加载器"规范来决定如何将模块插入运行时.加载器规范由 WHATWG 定义，但是尚未最终确定).因此，要接受 ES6 导入/导出，您需要使用转译器.当前的行业标准是

I'm using WebStorm latest version to work with Node.js (express.js) frame work. I have set my Babel so that I can use ES6 syntax, for example:

import express from "express".

Babel work ok it generate the index.js which contain index.js.map.

The problem is when running the project I still get the error

/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

Here is my project

Here is my index.js which babel generate. Look ok, I even tried to run it alone with no error

'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

The template is from node.js express template from webstorm. Do I need add any additional step?

Edit

I have also change the language - framework - javascript to ES6 but still error

Update my configure

解决方案

To make things clear: you issue has absolutely nothing to do with WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel

To make things work, try the following:

• install babel in your project using npm install --save-dev babel-cli babel-preset-env

• create a .babelrc file in project root dir:

  { "presets": ["env"] }

• in your Node.js Run configuration, pass -r babel-register to Node:

这篇关于使用 WebStorm 配置 Babel 以将 ES6 与 WebStorm Node.js 项目一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！