我在SO看到了这两个答案:
Exporting a class with ES6 (Babel)
Trying to export a class as a module ES6 babel
请注意,我没有使用Browserify,只用了Gulp和Node。
文件/文件夹结构:
./
./gulpfile.js
./_GULP
./_GULP/main_config.es6
./_GULP/_classes/Gcfg.es6
问题设置
我正在像这样导出一个名为Gcfg.es6
的类:
export default class Gcfg {
constructor() {
this.rootDir = './';
this.latestDir = './_LATEST/';
this.srcFolder = './_SRC/';
...
}
getSrcDir(dir="") {
return this.srcFolder + dir;
}
...
}
我正在尝试在 main_config.es6
中进行导入:
import Gcfg from '_classes/Gcfg';
根据GitHub上的这篇文章:
https://github.com/babel/babel/issues/849
我假设我都做得正确。我正在使用WebStorm,设置了一个“文件监视器”来在保存.es6文件时运行Babel。我没有做任何花哨的事情,在那里我使用的唯一可选标志是:
--source-maps
和 --out-file $FileNameWithoutExtension$.js $FilePath$
$FileNameWithoutExtension$.js 是一个WebStorm的应用程序变量,它仅仅是由监视器加载的文件,$FilePath$ 是文件的绝对路径。
所以命令看起来像这样(我相信我实际上并没有看到它被执行):
babel --source-maps --out-file main_config.js ./_GULP/
等等其他文件...
我认为所有文件都已经通过babel成功处理了。我在生成的JS中看到了exports和requires。
tl;dr
在 gulpfile.js
中,我正在执行以下操作:
gCfg = require('./_GULP/main_config');
<- 这个require是有效的!
然而,当我尝试运行GULP时,它会立即失败,在控制台中我会得到:
Error: Cannot find module '_classes/Gcfg'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/xxx/xxx/xxx/xxx/xxx/_GULP/main_config.js:9:20)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
问题
为什么我无法使用es6的import/export从中导出类并将其导入到中?是否需要polyfill(我正在加载babel/polyfill)?是因为我的路径中有下划线吗?我已经折腾了太长时间。
谢谢!