在Babel中导出es6类 - 找不到模块

时间:2015-10-08 03:16:06

标签: javascript gulp ecmascript-6 babeljs

我在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中看到了导出和需求。

TL;博士

我正在gulpfile.js

gCfg = require('./_GULP/main_config');< - 这需要有效!

但是,当我尝试运行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)

问题

为什么我无法导出Gcfg.es6中的课程并使用es6导入/导出将其导入main.es6?是否需要填充(我正在加载bable / polyfill)?我的路上有_吗?我刚刚对此进行了长时间的抨击。

谢谢!

1 个答案:

答案 0 :(得分:29)

你有一件事:

import Gcfg from '_classes/Gcfg';

如果您正在编译CommonJS并且没有任何特殊设置,Node将尝试加载node_modules/_classes/Gcfg。你可能想要:

import Gcfg from './_classes/Gcfg';