Webstorm 意外令牌导出

Question

我在 Webstorm 中遇到“意外令牌导出”问题，其他 StackOverflow 帖子尚未解决。本质上，我正在尝试将导入/导出模块功能与下面的 package.json 和 bar.js 代码一起使用。我正在使用 Node.js 5x、Babel 6，并且我有一个 File Watcher 设置来动态执行 Babel 转换。

代码应该不言自明，我很欣赏有关如何解决它的任何想法。同样，我已经尝试了其他 StackOverflow 建议，但目前没有运气。

//bar.js

'use strict';

export class Bar{
    constructor(){
        this.tempish = 'allo';
    }
}

//bar-compiled.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Bar = exports.Bar = function Bar() {
    _classCallCheck(this, Bar);

    this.tempish = 'allo';
};

//# sourceMappingURL=bar-compiled.js.map

//index.js

'use strict';

import {Bar} from './bar'

console.log('This is a test.');

//index-compiled.js

'use strict';

var _bar = require('./bar');

console.log('This is a test.');

//# sourceMappingURL=index-compiled.js.map

//package.json

{
  "name": "npt-test",
  "version": "1.0.0",
  "description": "",
  "main": "index-compiled.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.3.26",
    "babel-cli": "^6.4.5",
    "babel-core": "^6.4.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13"
  }
}

//.babelrc

{
    "presets": ["es2015", "stage-0", "stage-1"],
    "plugins": ["babel-plugin-transform-decorators-legacy"]
}

//Error on debug, I am running against the index-compiled.js during debug

C:\Program Files (x86)\JetBrains\WebStorm 11.0.3\bin\runnerw.exe"
"C:\Program Files\nodejs\node.exe" --debug-brk=45287 --nolazy index-compiled.js
Debugger listening on port 45287
[MYPROJECTDIR]\bar.js:3
export class Bar{
^^^^^^

SyntaxError: Unexpected token export
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> ([MYPROJECTDIR]\index-compiled.js:3:12)
at Module._compile (module.js:397:26)
at Object.Module._extensions..js (module.js:404:10)

进程以退出代码 1 结束

Answer 1

您的index-compiled.js 代码是什么样的？似乎它需要原始的bar.js 而不是bar-compiled.js。 Node.js 无法原生执行 ES6 代码，因此出现错误。

我建议将编译器配置为将转译后的代码输出到单独的目录中，以避免使用“已编译”后缀。有关使用 WebStorm 设置 Babel 6 的说明，请参阅以下链接：http://mcculloughwebservices.com/2015/12/10/webstorm-babel-6-plugin/