使用 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 语法,例如:
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
这是我的项目
这是我的 index.js babel 生成的。看起来不错,我什至尝试 运行 它没有错误
'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
模板来自node.jswebstorm的express模板。我需要添加任何额外的步骤吗?
编辑
我也把语言-框架-javascript改成了ES6,但还是报错
更新我的配置
澄清一下:您的问题与 WebStorm 完全无关,错误来自运行您的代码的 Node.js 解释器。
Node.js 仍然不原生支持 ES6 模块(实际上,目前没有 JavaScript 运行时支持它们 - ECMAScript 没有定义 "Loader" 规范来确定如何将模块插入运行时。加载器规范由 WHATWG 定义,但尚未最终确定)。
所以,要让 ES6 imports/exports 被接受,你需要使用转译器。当前的行业标准是 Babel
要使事情正常进行,请尝试以下操作:
- 使用
npm install --save-dev babel-cli babel-preset-env
在您的项目中安装 babel
在项目根目录中创建一个 .babelrc
文件:
{
"presets": ["env"]
}
在您的 Node.js 运行 配置中,将 -r babel-register
传递给节点:
作为使用 Node.js
运行 配置的替代方法,您可以考虑使用 npm
配置并直接使用适当的脚本。例如
在package.json
"scripts": {
"start": "babel-node src/index.js"
}
在网络风暴中:
https://i.stack.imgur.com/jrj8H.png
我正在使用 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
这是我的项目
这是我的 index.js babel 生成的。看起来不错,我什至尝试 运行 它没有错误
'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
模板来自node.jswebstorm的express模板。我需要添加任何额外的步骤吗?
编辑
我也把语言-框架-javascript改成了ES6,但还是报错
更新我的配置
澄清一下:您的问题与 WebStorm 完全无关,错误来自运行您的代码的 Node.js 解释器。 Node.js 仍然不原生支持 ES6 模块(实际上,目前没有 JavaScript 运行时支持它们 - ECMAScript 没有定义 "Loader" 规范来确定如何将模块插入运行时。加载器规范由 WHATWG 定义,但尚未最终确定)。 所以,要让 ES6 imports/exports 被接受,你需要使用转译器。当前的行业标准是 Babel
要使事情正常进行,请尝试以下操作:
- 使用
npm install --save-dev babel-cli babel-preset-env
在您的项目中安装 babel
在项目根目录中创建一个
.babelrc
文件:{ "presets": ["env"] }
在您的 Node.js 运行 配置中,将
-r babel-register
传递给节点:
作为使用 Node.js
运行 配置的替代方法,您可以考虑使用 npm
配置并直接使用适当的脚本。例如
在package.json
"scripts": {
"start": "babel-node src/index.js"
}
在网络风暴中: https://i.stack.imgur.com/jrj8H.png